Sass-插值#{}

使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。让我们看一下下面的例子：

$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;

}

这是 Sass 插值中一个简单的实例。当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用：

@mixin generate-sizes($class, $small, $medium, $big) {

    .#{$class}-small { font-size: $small; }

    .#{$class}-medium { font-size: $medium; }

    .#{$class}-big { font-size: $big; }

}

@include generate-sizes("header-text", 12px, 20px, 40px);

编译出来的 CSS:

.header-text-small { font-size: 12px; }

.header-text-medium { font-size: 20px; }

.header-text-big { font-size: 40px; }

一旦你发现这一点，你就会想到超级酷的 mixins，用来生成代码或者生成另一个 mixins。然而，这并不完全是可能的。第一个限制，这可能会很删除用于 Sass 变量的插值。

$margin-big: 40px;

$margin-medium: 20px;

$margin-small: 12px;

@mixin set-value($size) {

    margin-top: $margin-#{$size};

}

.login-box {

    @include set-value(big);

}

上面的 Sass 代码编译出来，你会得到下面的信息：

error style.scss (Line 5: Undefined variable: “$margin-".)

所以，#{}语法并不是随处可用，你也不能在 mixin 中调用：

@mixin updated-status {

    margin-top: 20px;

    background: #F00;

}

$flag: "status";

.navigation {

    @include updated-#{$flag};

}

上面的代码编译成css时同样会报错：

error style.scss (Line 7: Invalid CSS after "...nclude updated-": expected "}", was "#{$flag};")
幸运的是，可以使用 @extend 中使用插值。例如：

%updated-status {

    margin-top: 20px;

    background: #F00;

}

.selected-status {

    font-weight: bold;

}

$flag: "status";

.navigation {

    @extend %updated-#{$flag};

    @extend .selected-#{$flag};

}

上面的 Sass 代码是可以运行的，因为他给了我们力量，可以动态的插入 .class 和 %placeholder。当然他们不能接受像 mixin 这样的参数，上面的代码编译出来的 CSS:

.navigation {

    margin-top: 20px;

    background: #F00;

}

.selected-status, .navigation {

    font-weight: bold;

}

这里总结一下:

1.插值不能用在属性的值中，也就是不能出现在冒号后边，否则会报错，无法识别。

2.不能用来调用混合宏，如@include updated-#{$flag} ，这里的插值同样不会被识别。（@extend后边使用插值是可以的）。

巴特西

Sass-插值#{}

最新文章

热门文章