Sassを使用してメディアクエリ内からセレクターを拡張する


86

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


Fyi、これがあなたが与えた例を正しく機能させる問題です:github.com/sass/sass/issues/1050
Ajedi32

回答:


112

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

ミックスインを使用する

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

@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がこの制限を解除するまで待ちます(または自分でパッチを適用します)

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


@mindeavorこれはあなたのために働いた?メディアクエリで拡張クラスを使用できましたか?Sass 3.2では?
Yahreen 2014年

1
%foo不要ですが、.foo直接できます@include foo
phil294 2017

私の場合、%placeholderを拡張外部メディアクエリとともに使用しました。次に、メディアクエリ内で、セレクターにextend%placeholderを追加しました。議論に何か便利なものが付いてくるかどうかを確認します。Cimmanonに感謝します。
キーポール

11

記録のために、生成されたスタイルを1回だけ複製することで問題を解決することになった方法は次のとおりです。

// 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;
  }
}

2

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

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


ソリューションへのリンクは大歓迎ですが、それがなくても回答が役立つことを確認してください。リンクの周りにコンテキストを追加して、他のユーザーがそれが何であるか、なぜそこにあるのかを理解できるようにしてから、ページの最も関連性の高い部分を引用してください。ターゲットページが利用できない場合に再リンクします。リンクに過ぎない回答は削除される場合があります。
dippas 2018年

1

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

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

詳細については記事を参照してくださいが、要点は、ミックスインの「プレースホルダー」を呼び出して、@ extendと@includeのどちらを出力するかを決定することです。

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

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

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


0

私はブレークポイントを使用しますが、それは同じ考えです:

@mixin bp-small {
    @media only screen and (max-width: 30em) {
        @content;
    }

それを使用する方法:

.sidebar {
    width: 60%;
    float: left;
    @include bp-small {
        width: 100%;
        float: none;
    }
}

このオプションの詳細についてはミックスインに関するテキストがあります。


-2

リストラしてもらえますか?

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

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

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


SASSをどのようにコンパイルしていますか?外部的には、JSを使用しますか、それともある種のサーバー側コンポーネントを使用しますか?
Jason M. Batchelor 2013

rails-sassSASS v3.2.4を使用して標準のgemでコンパイルされています
soundly_typed

1
@mediaクエリ内で拡張する機能は非推奨になり、3.3で修正される予定です:chriseppstein.github.com/blog/2012/08/23/sass-3-2-is-released( 「@extendCSSディレクティブの制限」)
Jason M. Batchelor 2013

その情報を正しく理解していれば、それが問題の原因である可能性があります。私はあなたが何を見つけたか知りたいです!
Jason M. Batchelor 2013
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.