103

item クラスとコンパクトな「モディファイア」クラスがあります。

.item { ... }
.item.compact { /* styles to make .item smaller */ }

これで問題ありません。ただし、画面が十分に小さい場合にクラスを@media強制的にコンパクトにするクエリを追加したいと思います。.item

最初に考えたのは、これが私がやろうとしたことです：

.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
  .item { @extend .item.compact; }
}

ただし、これにより次のエラーが生成されます。

@media 内から外部セレクターを @extend することはできません。同じディレクティブ内で @extend セレクターのみを使用できます。

コピー/貼り付けスタイルに頼らずに、SASS を使用してこれを達成するにはどうすればよいですか?

4

6 に答える 6

137

簡単な答えは、Sass がそのセレクターを作成できない (または作成しない) ため、できません。メディア クエリの内部にいて、メディア クエリの外部にあるものを拡張することはできません。セレクターを構成しようとするのではなく、単純にそのコピーを取得するのであれば、それは確かに素晴らしいことです。しかし、そうではないので、できません。

ミックスインを使用する

メディア クエリの内外でコード ブロックを再利用する場合でも、それを拡張できるようにしたい場合は、mixin と extends クラスの両方を記述します。

@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

// usage
.foo {
    @extend %foo;
}

@media (min-width: 30em) {
    .bar {
        @include foo;
    }
}

外部からのメディア クエリ内でセレクターを拡張する

これはあなたのユースケースにはあまり役に立ちませんが、別のオプションです:

%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

@media (min-width: 30em) {
  %bar {
    background: yellow;
  }
}

// usage
.foo {
  @extend %foo;
}

.bar {
  @extend %bar;
}

Sass がこの制限を解除する (または自分でパッチを当てる) まで待ちます

この問題に関しては多くの進行中の議論があります (追加する意味のあるものがない限り、これらのスレッドに貢献しないでください: メンテナーは、ユーザーがこの機能を望んでいることをすでに認識しています。構文である必要があります)。

于 2013-02-12T20:46:13.993 に答える
13

記録のために、生成されたスタイルを一度だけ複製することで問題を解決した方法を次に示します。

// This is where the actual compact styles live
@mixin compact-mixin { /* ... */ }

// Include the compact mixin for items that are always compact
.item.compact { @include compact-mixin; }

// Here's the tricky part, due to how SASS handles extending
.item { ... }
// The following needs to be declared AFTER .item, else it'll
// be overridden by .item's NORMAL styles.
@media (max-width: 600px) {
  %compact { @include compact-mixin; }

  // Afterwards we can extend and
  // customize different item compact styles
  .item {
    @extend %compact;
    /* Other styles that override %compact */
  }
  // As shown below, we can extend the compact styles as many
  // times as we want without needing to re-extend
  // the compact mixin, thus avoiding generating duplicate css
  .item-alt {
    @extend %compact;
  }
}
于 2013-02-12T21:58:48.927 に答える
2

SASS/SCSSは@extendメディアクエリ内のディレクティブをサポートしていないと思います。http://designshack.net/articles/css/sass-and-media-queries-what-you-can-and-cant-do/

代わりにミックスインを使用する必要があるかもしれませんが、コードの膨張は目的と比較検討する必要があります。

于 2013-02-12T20:48:42.647 に答える
1

これは、私が見つけた最もクリーンで部分的な解決策です。可能な場合は @extend を利用し、メディア クエリ内では mixin にフォールバックします。

Sass のクロスメディア クエリ @extend ディレクティブ

詳細については記事を参照してください。ただし、要点は、@extend または @include を出力するかどうかを決定する mixin の「プレースホルダー」を呼び出すことです。

@include placeholder('clear') {
   clear: both;
   overflow: hidden;
}

.a {
    @include _(clear);
}
.b {
    @include _(clear);
}
.c {
    @include breakpoint(medium) {
      @include _(clear);
   }
}

最終的には、現在受け入れられているミックスインを使用するよりも優れているとは限りません。

于 2014-07-01T18:16:39.610 に答える
-2

再構築していただけませんか？

.compact { //compact-styles }
.item {}
.item.compact { @extend .compact } 

@media (max-width: 600px) {
    .item { @extend .compact; }
}

ドキュメントを正しく理解していれば、うまくいくはずです。あなたが試みている方法がうまくいかない理由は、 @extend を解析しているときに .item.compact が表示されないためだと思いますが、それは情報に基づいていない推測なので、トラックに積んだ塩でそれを取ってください! :)

于 2013-02-12T20:18:46.527 に答える