Sass の基本 (3)_html/css_WEB-ITnose

拡張/継承
CSS を知っている学生にとって、継承はまったく馴染みのないものではありません。まず写真を見てみましょう
Sass には継承、つまり継承されたクラスのスタイル コード ブロックもあります。 Sass では、Zhongshi はキーワード「@extend」を使用して既存のクラス スタイル ブロックを継承し、コードの継承を実現します。
. f36;
color:#fff ;
@extend .btn;
}
.btn-second{
background-color:organge;
color:#fff;
.btn-秒{
}
コンパイル後:
//css
.btn, . btn-primary, .btn- Second {
logue: 14px }
.btn-primary{
background-color: #f36;
color:# fff;
.btn-second{
CSS は結合セレクターを形成するために Merge together を選択します:
.btn, .btn-primary, .btn-second {
;
Font-size: 14px ;
}

は Placeholder %placeholder を説明しました

Sass の placeholder %placeholder 関数は、 %placeholder で宣言されたコードであるため、以前の CSS の基本クラスによって引き起こされるコードの冗長性を置き換えることができる非常に強力で実用的な関数です。 @extend によって呼び出されない場合、コードは生成されません。 extend %mt5;
span{
@extend %pt5;
}
}
コンパイル済みcss
//css
.block{
margin-top:5px;
}
。 btn, .block scan{
padding-top:5px;
}
@extend によって呼び出されるプレースホルダーを通じて、コンパイルされたコードは同じコードをマージします。これは私たちが期待している効果でもあり、コードをよりクリーンにします。 ミックス

混合マクロ vs 継承 vs プレースホルダー
a Sass で使用される混合マクロ
//SCSS で使用される混合マクロ
@mixin mt($var){
margin-top:$var;
}
{
@ include mt(5px);
header{
:block;
@include mt(5px);
}
}
コンパイル結果:
.block scan {
display: block; }
.header {
色：オレンジ;

}
.header span {
display: block;

}

.block、.block spam、.header、.header span {

margin-top: 5px;同じコードブロックを作成します。

b) Sass での継承

同様に、クラス名を使用して上記のコード内の混合マクロを表し、継承を通じてそれを呼び出します。 span{
display:block;
color:orange;

@extend .mt;

}
コンパイル結果:
.block scan {

ヘッダspan

.block, .blockスパン、.header、.header スパン{
margin-top: 5px;
}
コードブロックが変数パラメータを必要とせず、ファイル内にすでに基本クラスが存在する場合は、Sass 継承を使用することをお勧めします。
c）プレースホルダー、プレースホルダーを見てみましょう。 %mt;
span{
display:block;
}
}
.header{
color:orange;
@extend %mt;
表示: ブロック

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

違い#{} CSS プリプロセッサ言語を使用する主な理由の 1 つは、より良い構造システムを取得するために Sass を使用することです。 、より面白く、Sass の補間は重要な部分です。次の例を見てみましょう。
$properties:(margin ,padding);
@mixin set-value($side,$value){
@each $prop in $properties{
#{$prop}-#{$side}:$value;
}
}
.login-box{
@include set-value(top,14px);
}
コードはcssにコンパイルされます
.login-box{
margin-top:14px;
padding-top:14px;
}
属性値を設定したい場合は、文字列挿入を使用してセレクターを構築することもできます。
@mixingenerate-sizes($class,$small,$medium,$big)