CSS コンパイル ツール Sass_html/css_WEB-ITnose で混合マクロ、継承、およびプレースホルダーを使用する場合

//SCSS中混合宏使用@mixin mt($var){  margin-top: $var;  }.block {  @include mt(5px);  span {    display:block;    @include mt(5px);  }}.header {  color: orange;  @include mt(5px);  span{    display:block;    @include mt(5px);  }}

1. 上記は、sass 混合マクロメソッドで記述された Sass コードであり、以下はコンパイルされた CSS コードです

.block {  margin-top: 5px;}.block span {  display: block;  margin-top: 5px;}.header {  color: orange;  margin-top: 5px;}.header span {  display: block;  margin-top: 5px;}

上記のコードからわかるように、sass 混合マクロの記述同じスタイルのコードは自動的にマージされません。スタイル ファイル内で同じ混合マクロが呼び出された場合、対応する複数のスタイル コードが生成され、 コードの冗長性 が発生し、これも許容できません。しかし、彼は無駄ではなく、たとえば

@mixin br($rad){    border-radius:$rad;    -webkit-border-radius:$rad;    -moz-border-radius:$rad;    -ms-border-radius:$rad;}.md{    @include br(20px);}

2. 以下は Sass での継承です

//SCSS 继承的运用.mt{  margin-top: 5px;  }.block {  @extend .mt;  span {    display:block;    @extend .mt;  }}.header {  color: orange;  @extend .mt;  span{    display:block;    @extend .mt;  }}

以下はコンパイルされた CSS コードです

.mt, .block, .block span, .header, .header span {  margin-top: 5px;}.block span {  display: block;}.header {  color: orange;}.header span {  display: block;}

継承を使用した後、結果として得られる CSS は、継承を使用してコード ブロックをマージし、.mt、.block、.block スパン、.header、.header スパンなどの組み合わせたセレクターを通じて全員に表示します。この方法でコンパイルされたコードは、混合マクロよりもはるかにクリーンであり、これは私たちが期待していることです。しかし、彼は 変数パラメータを渡すことができません 。そのため、コード ブロックに変数パラメーターが必要なく、基本クラスがファイル内にすでに存在する場合は、Sass 継承を使用することをお勧めします。

3. プレースホルダー

%mt{  margin-top: 5px;  }.block {  @extend %mt;  span {    display:block;    @extend %mt;  }}.header {  color: orange;  @extend %mt;  span{    display:block;    @extend %mt;  }}

プレースホルダーによってコンパイルされた CSS コードは、コード内でプレースホルダー mt セレクターが生成されないことを除いて、基本的に継承を使用する場合と同じです。したがって、プレースホルダーと継承の主な違いは、「プレースホルダーは独立して定義され、呼び出されないときは CSS にコードを生成しません。継承とは、呼び出されるかどうかに関係なく、最初に基本クラスが存在することを意味し、基本クラスのスタイルはコンパイルされた CSS コードに表示されます