css - セレクターを結合する方法

Question

このCSSを書く方法はありますか：

div.some-class{
  ...
}
span.some-class{
  ...
}

scssを使用してこのようなものとして？

.some-class{
  &div{
    ...
  }
  &span{
    ...
  }
}

上記を試してみましたが、エラーが返されます。

Answer 1

それはあなたが何をしようとしているのかによります。

あなたが示す例は、と解釈さ.some-classdivれ.some-classspan、コンパイルエラーが発生します。基本的に、アンパサンドは親セレクターを表します。

div.some-classとが同じスタイルを共有していない場合span.some-classでも、最初のブロックが最も効果的な書き方です。

それらが同じスタイルの一部を共有している場合は、ミックスインを作成できます。

// Shared Styles
@mixin some-class {
  background: #f00;
  color: #fff;
}

div.some-class {
  @include some-class;
  ... other styles
}

span.some-class {
  @include some-class;
  ... other styles
}

@extend既存のクラスを使用することもできます:

.some-class {
  background: #f00;
  color: #fff;
}

div.some-class {
  @extend .some-class;
  ... other styles
}

span.some-class {
  @extend .some-class;
  ... other styles
}

既存のクラスを拡張する場合、そのクラスはファイルに含まれるルート クラスである必要があります (つまり、ネストされたクラスにすることはできません)。

つまり、どちらの要素にも class があるsome-classため、通常の CSS を同じように簡単に定義できます。

.some-class {
  background: #f00;
  color: #fff;
}

div.some-class {
  ... other styles
}

span.some-class {
  ... other styles
}

Answer 2

コードをこのようにきちんとした小さなブロックにグループ化したいというのが本当の望みであることは知っていますが、それは不可能です。コードをコンパイルするときに発生するエラーは非常に明確です。

>>> Change detected at 14:46:18 to: test.scss
    error sass/test.scss (Line 2: Invalid CSS after "  &": expected "{", was "div{"

"div" may only be used at the beginning of a compound selector.)

もちろん、逆にして にするとdiv&、次のエラーが発生します。

>>> Change detected at 14:48:01 to: test.scss
    error sass/test.scss (Line 2: Invalid CSS after "  div": expected "{", was "&{"

"&" may only be used at the beginning of a compound selector.)

あなたの唯一の選択肢は、まったく入れ子にしないことです。

.some-class {
    ...
}

div.some-class {
    ...
}

span.some-class {
    ...
}