css - SASSでは、メディアクエリとセレクターの両方で一連のスタイルルールをラップできますか

Question

デスクトップ版のサイトにのみ適用する必要のあるスタイルがたくさんあります。メディアクエリを使用してこれらのスタイルを適用していますが、ウィンドウのサイズを変更するときにサイトがモバイルデザインに切り替わらないようにするために、画面が大きい場合はページの読み込み時にクラスも追加します。

現時点で私は

@media (min-width: $breakpoint) {
   // my styles
}

次のようなものを実現するためにミックスインを作成するにはどうすればよいですか？

@media (min-width: $breakpoint),
.not-mobile {
   // my styles
}

score 0 · Accepted Answer

これが私の解決策です

$breakpoint: 768px;

@mixin not-mobile {
  @media (min-width: $breakpoint) {
    @content;
  }
  .not-mobile {
    @content;
  }
}

score -1 · Accepted Answer

Breakpoint拡張機能のnoqueries、またはJacketのメディアクエリフォールバックミックスインの例を確認する必要があります。これらは両方とも、条件付きcssルールを出力するように設計された堅牢なツールです。

2 に答える 2