24

わかりましたので、ネストされたセレクターを持つプレースホルダーがあります:

%block {
  .title {
    font-size:12px;
  }
}

それを拡張して.titleクラスに追加したい：

.superblock {
  @extend %block;
  .title {
    font-weight:bold;
  }
}

私が欲しい答えはこれです：

.superblock .title {
  font-size: 12px;
  font-weight: bold; }

しかし、私が得る答えはこれです：

.superblock .title {
  font-size: 12px; }

.superblock .title {
  font-weight: bold; }

私は何か間違ったことをしていますか、それともこれがどのように機能するのでしょうか? 明確にするために、それをマージしたいと思います。の中に直接何かを追加し、 %block も拡張.superblockする別のように追加すると.superblock2、問題なくマージされます。

4

4 に答える 4

42

Sass には、重複するセレクターを「マージ」する機能がありません。CSS がコンパイルされた後、これを行う別のユーティリティを見つける必要があります。

ディレクティブは、ミックスインの代わりにクラスを使用する方法だけではありません( @extendLESS スタイルのミックスイン呼び出しに似ています)。クラスを拡張する代わりに通常のクラスを拡張すると、なぜ@extendそのように機能するのかが明らかになります。

.block {
  font-size:12px;
}

.foo {
    @extend .block;
    font-weight: bold;
}

出力：

.block, .foo {
  font-size: 12px;
}

.foo {
  font-weight: bold;
}

拡張クラスを使用すると、元のクラス名の発行が抑制されます。

なぜ@extendこのように機能するのかがわかったので、まだ何@extendを提供したいですか? 答えが「いいえ」の場合は、ミックスインを使用する必要があります。

@mixin block {
    // styles
    .title {
        font-size: 12px;
        @content;
    }
}

.superblock {
    @include block {
        font-weight: bold;
    }
}

出力：

.superblock .title {
  font-size: 12px;
  font-weight: bold;
}
于 2013-04-18T15:15:57.620 に答える
2

これはほとんどそれです。SASS は拡張宣言を個別に生成します。

また、セレクターによって宣言をグループ化する機能はなく、それほどスマートではありません。

しかし、CSS のクリーン度についてはそれほど心配する必要はありません。最新の Web サーバーは CSS を gzip 形式で提供しており、すべての複製は適切に圧縮されます。

于 2013-04-18T15:19:47.247 に答える