标签：
将预备好的值放进#{“预备好的值”}这里面
@mixin sizes($class, $small, $medium, $big) { .#{$class}-small { font-size: $small; } .#{$class}-medium { font-size: $medium; } .#{$class}-big { font-size: $big; } } @include sizes("header", 12px, 20px, 40px); //CSS .header-small { font-size: 12px; } .header-medium { font-size: 20px; } .header-big { font-size: 40px; }
$properties: (margin, padding); @mixin set-value($side, $value) { @each $prop in $properties { #{$prop}-#{$side}: $value; } } .login-box { @include set-value(top, 14px); }
编译后：
.login-box { margin-top: 14px; padding-top: 14px; }
一旦你发现这一点，你就会想到超级酷的 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; }
以上摘抄与慕课网的Sass入门篇
标签：
原文地址：http://www.cnblogs.com/QRL909109/p/5594678.html
