Sass ミックスイン、継承、プレースホルダー_html/css_WEB-ITnose

混合マクロ - 混合マクロの宣言
色、フォントなど、Web サイト全体で類似した小さなスタイルがいくつかあり、Sass でそれらを均一に処理するために変数を使用できる場合、これは次のようになります。オプションはまだ良いです。しかし、スタイルがますます複雑になり、スタイルの大部分を再利用する必要がある場合、変数を使用しても目的を達成できません。このとき、Sass のミックスインが非常に意味を持つようになります。
1. mixin マクロを宣言します
パラメーターなしの Mixin マクロ:
Sass では、「@mixin」を使用して mixin マクロを宣言します。例:

1 @mixin border-radius{2  -webkit-border-radius: 5px;3  border-radius: 5px;4 }

ここで、@mixin はミックス マクロを宣言するために使用されるキーワードであり、CSS の @media および @font-face に似ています。 border-radius はミックスインの名前です。中括弧内は再利用されたスタイル コードです。
パラメータ付き混合マクロ:
パラメータなしで混合マクロを宣言することに加えて、次のようなパラメータ付き混合マクロを定義することもできます:

1 @mixin border-radius($radius:5px){2  -webkit-border-radius: $radius;3  border-radius: $radius;4 }

複雑な混合マクロ:
上記は単純なものです。 Sass のミックスイン マクロには、より複雑なメソッドも用意されており、次のように、中括弧内に論理関係を記述することもできます。シャドウ ハイブリッド マクロには複数のパラメータがあります。現時点では、代わりに「...」を使用できます。簡単に説明すると、$shadow のパラメータ番号の値が「1」以上の場合、シャドウの値が複数あることを意味します。それ以外の場合、デフォルトのパラメータ値は「0 0 4px rgba(0,0,0,.3)」になります。 )」と呼ばれます。

混合マクロ - 混合マクロの呼び出し

混合マクロは @mixin キーワードを通じて Sass で宣言され、実際の呼び出しではキーワード "@include" と一致して、宣言された 1 つの混合マクロを呼び出します。

1 @mixin box-shadow($shadow...) {2  @if length($shadow) >= 1 {3         @include prefixer(box-shadow, $shadow);4     } @else{5         $shadow:0 0 4px rgba(0,0,0,.3);6         @include prefixer(box-shadow, $shadow);7     }8 }

ボタンで定義されたハイブリッド マクロ「border-radius」を呼び出すには、次のように使用できます:

1 @mixin border-radius{2  -webkit-border-radius: 3px;3  border-radius: 3px;4 }

この時点でコンパイルされた CSS:

1 button {2 <strong> @include</strong> border-radius;3 }

ハイブリッド マクロのパラメーター - 値なしでパラメーターを渡す

Sass のハイブリッド マクロは、Sass でパラメーターを渡す場合、主に次の状況があります:

A) 値なしでパラメーターを渡す
ミックスイン マクロ内。 、値を指定せずにパラメーターを渡すことができます。

1 button {2  -webkit-border-radius: 3px;3  border-radius: 3px;4 }

ミックスインマクロ「border-radius」に値のないパラメータ「$radius」が定義されています。

呼び出し時にこのハイブリッド マクロにパラメータ値を渡すことができます:

1 @mixin border-radius($radius){2     -webkit-border-radius: $radius;3     border-radius: $radius;4 }

これは、「3px」の「border-radius」値をハイブリッド マクロに渡すことを意味します。

コンパイルされた CSS:

1 .box{2     @include border-radius(3px);3 }

ハイブリッド マクロ パラメーター -- 値を持つパラメーターを渡す

Sass ハイブリッド マクロでは、デフォルト値をハイブリッド マクロ パラメーターに渡すこともできます。 :

1 .box {2  -webkit-border-radius: 3px;3  border-radius: 3px;4 }

パラメータ「$radius」が混合マクロ「border-radius」に渡され、このパラメータにはデフォルト値「3px」が割り当てられます。

このようなハイブリッド マクロを呼び出す場合、ページ上の丸い角の多くが "3px" の丸い角であると仮定すると、デフォルトのハイブリッド マクロ "border-radius" を呼び出すだけで済みます。今回は:

1 @mixin border-radius($radius:3px){2     -webkit-border-radius: $radius;3     border-radius: $radius;4 }

Compiled CSS:

1 .btn {2  @include border-radius;3 }

ただし、ページ上の一部の要素の角の丸みが異なる場合があるため、次のような値を混合マクロにランダムに渡すことができます。

1 .btn {2  -webkit-border-radius: 3px;3  border-radius: 3px;4 }

コンパイル済み CSS:

1 .box {2  @include border-radius(50%);3 }

ハイブリッド マクロ パラメータ - 複数のパラメータを渡す

Sass 混合マクロ 1 つのパラメータを渡すだけでなく、次のような複数のパラメータを渡すこともできます。として:

りー

混合マクロ「center」には複数のパラメータが渡されます。実際の呼び出しは、他の mixin マクロの呼び出しと同じです:

1 .box {2  -webkit-border-radius: 50%;3  border-radius: 50%;4 }

コンパイルされた CSS:

1 @mixin center(<strong>$width</strong>,<strong>$height</strong>){2  width: $width;3  height: $height;4  position: absolute;5  top: 50%;6  left: 50%;7  margin-top: -($height) / 2;8  margin-left: -($width) / 2;9 }

には特別なパラメーター "..." があります。混合マクロ パスのパラメーターが多すぎる場合は、次のようなパラメーターを使用して置き換えることができます。

混合宏的参数--混合宏的不足
混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。如：

 1 @mixin border-radius{ 2  -webkit-border-radius: 3px; 3  border-radius: 3px; 4 } 5  6 .box { 7  @include border-radius; 8  margin-bottom: 5px; 9 }10 11 .btn {12  @include border-radius;13 }

示例在“.box”和“.btn”中都调用了定义好的“border-radius”混合宏。先来看编译出来的 CSS：

 1 .box { 2  -webkit-border-radius: 3px; 3  border-radius: 3px; 4  margin-bottom: 5px; 5 } 6  7 .btn { 8  -webkit-border-radius: 3px; 9  border-radius: 3px;10 }

Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。

 

 

 

扩展/继承(@extend)
在 Sass 中继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示：

 1 //SCSS 2 .btn { 3  border: 1px solid #ccc; 4  padding: 6px 10px; 5  font-size: 14px; 6 } 7 .btn-primary { 8  background-color: #f36; 9  color: #fff;10  @extend .btn;11 }12 .btn-second {13  background-color: orange;14  color: #fff;15  @extend .btn;16 }

编译出来之后：

 1 //CSS 2 .btn, .btn-primary, .btn-second { 3  border: 1px solid #ccc; 4  padding: 6px 10px; 5  font-size: 14px; 6 } 8 .btn-primary { 9  background-color: #f36;10  color: #fff;11 }13 .btn-second {14  background-clor: orange;15  color: #fff;16 }

从示例代码可以看出，在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器：

1 .btn, .btn-primary, .btn-second {2  border: 1px solid #ccc;3  padding: 6px 10px;4  font-size: 14px;5 }

 

 

 

占位符%placeholder
Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，可以取代以前 CSS 中的基类造成的代码冗余的情形。 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。

1 %mt5 {2  margin-top: 5px;3 }4 %pt5{5  padding-top: 5px;6 }

这段代码没有被 @extend 调用，只有通过 @extend 调用才会产生代码：

 1 //SCSS 2 %mt5 { 3     margin-top: 5px; 4 } 5 %pt5{ 6     padding-top: 5px; 7 } 8  9 .btn {10  @extend %mt5;11  @extend %pt5;12 }13 14 .block {15  @extend %mt5;16     span {17  @extend %pt5;18     }19 }

编译出来的CSS

1 //CSS2 .btn, .block {3  margin-top: 5px;4 }5 .btn, .block span {6  padding-top: 5px;7 }

通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。

 

 

混合宏 VS 继承 VS 占位符
什么时候用混合宏，什么时候用继承，什么时候使用占位符？
a)Sass中的混合宏使用

总结：不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余。他还可以传参数。

如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
b) Sass 中继承

总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多。但是他不能传变量参数。
如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
c) 占位符

总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”