Sass_html/css_WEB-ITnose で Interpolation#{} を使用する方法を学ぶ

Sass を学習することは、CSS を効率的に記述することに他ならず、Sass での Interpolation #{} は重要な部分です。調べてみましょう...

1. 単純な栗

SCSS:

@charset "UTF-8"; //不声明在ruby编译时会报错，因为下面有中文注释;$prop1: border; //一个值；@mixin set-one($side, $val){    #{$prop1}-#{$side}: $val;    //#{$prop1}-$side: $val; <= 这样写编译会出现错误，记得#{$side};}.box-bor{    @include set-one(width, 2px);    @include set-one(style, dashed);    @include set-one(color, green);    }

は次のようにコンパイルされます:

.box-bor {  border-width: 2px;  border-style: dashed;  border-color: green;  //咦！不对啊，写border一般不都这样嘛! => border: 2px dashed green; 请看下面}

2ボーダーのコンパイル方法: 2px の緑色の破線;

SCSS:

@mixin set-more($wid, $sty, $col){    #{$prop1}: #{$wid} #{$sty} #{$col}; //其实就是结合混合宏传多个参数;}.box-bor2{    @include set-more(2px, dashed , green);}

は次のようにコンパイルされます:

.box-bor2 {  border: 2px dashed green;}

3. 複数の値を結合します。 >

SCSS:

$prop2: (padding, margin); //多个值用括号;@mixin set-prop($side, $val){    @each $prop in $prop2{ //遍历$prop2里的所有值（margin,padding）        #{$prop}-#{$side}: $val; //注意'-'前后不能有空格;    }}.box{    @include set-prop(left, 16px);}

は次のようにコンパイルされます:

.box {  padding-left: 16px;  margin-left: 16px;}

4. ビルド セレクター

が使用されます ブートストラップを知っている人は誰でも知っていますそのボタンには事前に定義されたスタイルがあることを確認します。

0717ed23345201bcf321ddd24811e604Success81009057a26430cdf43b060cc79c95c0情報65281c5ac262bf6d81768915a4a77ac099266549b2a2cb54dd7be45f5d1f5317警告65281c5ac262bf6d81768915a4a77ac0危険">危険65281c5ac262bf6d81768915a4a77ac0

SCSS:

@mixin selector($c, $s, $i, $w, $d, $sc, $ic, $wc, $dc){    .#{$c}-success{ background-color: $s; border-color:$sc; }    .#{$c}-info   { background-color: $i; border-color:$ic; }    .#{$c}-warning{ background-color: $w; border-color:$wc; }    .#{$c}-danger { background-color: $d; border-color:$dc; }}//@include selector('btn', #5cb85c, #5bc0de, #f0ad4e, #d9534f, //background-color                           #4cae4c, #46b8da, #eea236, #d43f3a); //border-color//$c可(可不)带单双引号，上面代码换行为了好方便阅读，当然编译的时候也是能正常编译的;//直接@include selector调用编译后是没有.btn;.btn{    color: #fff;    @include selector(btn, #5cb85c, #5bc0de, #f0ad4e, #d9534f,                           #4cae4c, #46b8da, #eea236, #d43f3a); }

は次のようにコンパイルされます:

.btn {  color: #fff;}.btn .btn-success {  background-color: #5cb85c;  border-color: #4cae4c;}.btn .btn-info {  background-color: #5bc0de;  border-color: #46b8da;}.btn .btn-warning {  background-color: #f0ad4e;  border-color: #eea236;}.btn .btn-danger {  background-color: #d9534f;  border-color: #d43f3a;}

5 。誤った使用例

別のミックスインを生成するために使用される、スーパー ミックスインを思わせるセレクターを作成しました。これにより、Sass 変数の使用に適した補間が制限される可能性があります。以下のコードを見てください:

SCSS:

$btn-success: #5cb85c;$btn-info: #5bc0de;$btn-warning: #f0ad4e;$btn-danger: #d9534f;@mixin set-bg($name) {    background-color: $btn-#{$name};//btn有多种状态,都存在变量里;}.btn {    @include set-bg(success);}

上記のコードを記述すると、コンパイラーはエラーを報告します:

(行 52:未定義の変数: "$ btn-"。)

したがって、#{} 構文はどこでも使用できるわけではありません。また、ミックスインで呼び出された場合も次のように報告されます。エラー:

(行 64: "...nclude updated -" の後の CSS が無効です: "}" が期待されていましたが、"#{$flag};" でした)

@mixin btn-status {    margin-top: 20px;    background: #F00;}$flag: "status";.box {    @include btn-#{$flag};}

幸いなことに、@extend を使用すると、 @extend interpolation

SCSS を使用できます:

は次のようにコンパイルされます:

%btn-status { //不能像mixin那样传参了！    margin-top: 20px;    background: #F00;}$flag: "status";.foo {    @extend %btn-#{$flag};}