css - CSS - 1 つの ID に適用する複数のセレクターをグループ化する

Question

クライアント用にモバイルスタイルシートをセットアップしたいのですが、システムセットアップのため、スタイルシートを 1 つしか含めることができません。

各ページには ID があり、サイトの設計により、各ページの要素をわずかに異なる方法でターゲットにできるようにしたいと考えています。

#home .classname{} を介してクラスをターゲットにすることでこれを実行できることはわかっていますが、一連のクラスを個別にではなく、1 つのプレフィックスでグループ化する方法があるかどうか疑問に思いました -

 #home{
  .classname1{}
  .classname2{}
  .classname3{}
 }

私はこれについて何も読んだことがありませんが、私たちの場合に本当に役立つものだと思っただけで、おそらく過去に考えられていましたか?

乾杯ポール

score 2 · Accepted Answer

SassまたはLessでネストされたスタイルを使用できます。この場合、HTML 構造内で非常に頻繁に組み合わせられるツリークラスの 1 つの余分なクラスを使用することをお勧めします。たとえば、列のような構造がある場合などです。

<div class="classname1 combinedclass"></div>
<div class="classname2 combinedclass"></div>
<div class="classname2 combinedclass"></div>

CSS

.combinedclass {
    // Styles here
}

score 0 · Accepted Answer

CSS 拡張ライブラリを探しています。最も一般的なのは次の 2 つです。

どちらかを使用して、このようにスタイルを組み合わせることができます

#home{
  .classname1;
  .classname2;
  .classname3;
 }

score 0 · Accepted Answer

一言：少ない。

開発中に使用less.jsし、本番環境にプッシュするときに縮小された CSS ファイルにコンパイルするだけです。

score 0 · Accepted Answer

いいえ、それは不可能です。Less や Sass などを使用して、そのようなネストを行うことができますが、CSS にコンパイルする必要があります。

それ以外は、次を使用する必要があります。

#home .classname1{}
#home .classname2{}
#home .classname3{}

score 0 · Accepted Answer

ネストされたスタイルで CSS を記述するのは有効な方法ではありません

 #home{
  .classname1{}
  .classname2{}
  .classname3{}
 }

CSS は次の形式で記述できます。

#home .classname1{}
 #home .classname2{}
 #home .classname3{}

score 0 · Accepted Answer

あなたが使用することができます

#home .classname1, #home .classname2, #home .classname3
{
}

すべてのクラスに何かを適用したい場合、または

#home .classname1{}
#home .classname2{}
#home .classname3{}

6 に答える 6