20

Sass ライブラリに BEM モデルのようなものを実装したいと考えています。しかし、私はこれを行うためのきれいな方法を見つけるのに苦労しています。

たとえば、共通要素の「ベース」スタイルを宣言し、それを便利なバリエーションで拡張したいと思います。

.container {
  margin: 10%;
  background: #eee;

  &-featured {
    border: 2px solid #999;
  }

}

ここでの問題は、生成され.container-featuredたクラスにボーダー プロパティしか含まれていないことです。Sass には、その「親」クラスのマージンと背景が含まれていません。

したがって、目的の結果を得るには、マークアップ内のクラスを 2 倍にする必要があります。

<div class="container container-featured">
  ...
</div>

親クラスからそのモディファイア クラスにプロパティをプルして、マークアップでモディファイア クラスを参照するだけで同じ視覚的結果を得る方法はありますか?

<div class="container-featured">
  <!-- has margin, background, and border styles via just modifier class -->
</div>

これを行うためにミックスインを使用しようとしましたが、物事は非常に迅速に冗長になり、繰り返しになります。

@mixins container {
  margin: 10%;
  background: #eee;
}

.container {
  @include container;

  &-featured {
    @include container;
    border: 2px solid #999;
  }

}

Sassでこれを達成する簡単でクリーンな方法はありますか?

4

2 に答える 2

27

探しているのは@extendディレクティブです。 @extendあるセレクターから別のセレクターに一連の CSS プロパティを共有できます。container-featuredこれは、クラスを使用するだけでよいことを意味します。

例

.container {
  margin: 10%;
  background: #eee;

  &-featured {
    @extend .container;
    border: 2px solid #999;
  }
}

コンパイルすると:

.container,
.container-featured {
    margin: 10%;
    background: #eee;
}

.container-featured {
    border: 2px solid #999;
}
于 2014-10-21T10:50:36.810 に答える