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を使用してこれをどのように達成しますか?