1

sass は、これを可能にする @extend メソッドを提供してくれることを知っています。

%knob {
  width: 10px;
  height: 10px;
}

.house {
  &__door {
    &__knob {
      color: inherit;
      @extend %knob;

      &--red {
        @extend %knob;
        // $1
        color: red;
      }

      &--blue{
        @extend %knob;
        // $1
        color: blue;
      }
    }
  }
}

ただし、抽象クラスをまったく定義したくないのですが、修飾子内から (この場合は幅と高さ) で定義%knobされたプロパティを参照/含めることは可能でしょうか?__knob--red--blue

少し手助けするために、ここにsassmeisterスニペットを含めます：http://sassmeister.com/gist/58b5b4673a18ecadbba7

ここの例は問題のように見えないかもしれませんが、長いクラス名を持つ要素に2つ以上の異なる修飾子グループがあり、抽象クラスを作成しない場合、私は時々、<p class="some other classes some-house__some-door__some-knob some-house__some-door__some-knob--red">example</p>あまり望ましくないと思うこのようなhtmlタグで終わることがあります.

私が達成したいこと:

<p class="some other classes some-house__some-door__some-knob--red"></p>親要素を参照すると、抽象%knobクラスを宣言する必要なく、この文字列をに減らすことができます

ここで抽象クラスを使用することをためらうのはなぜですか。

__door要素内で抽象クラスを宣言すると( http://sassmeister.com/gist/bc49e0885342e96a8fbd )、次の結果が得られます。

.house__door .house__door__knob, .house__door .house__door__knob--red, .house__door .house__door__knob--blue {
  width: 10px;
  height: 10px;
}

希望の代わりに

.house__door__knob, .house__door__knob--red, .house__door__knob--blue {
  width: 10px;
  height: 10px;
}

使用されるスコープ外の抽象クラスを宣言すると、コードが読みにくくなります

または、コードをより読みやすく/保守しやすくするために使用できる別のアプローチがありますか?

4

1 に答える 1

0

私の質問への答えを探しているときに、親要素のプロパティを継承する/ここで @extend または @include を使用することは、要素に最大1つの変更がある場合にのみうまく機能するため、最良のアイデアではない可能性があるという結論に達しました:

それ以外の場合、複数の変更が同じモデルを拡張し、同じ html 要素に使用される場合、すべての基本プロパティが複数回宣言されます。

また、要素を深くネストする必要はまったくありません (つまりfoo__bar__baz)。要素を分離すると、コードの保守が容易になります。

于 2015-10-27T19:11:41.223 に答える