sass 插值:#{} 应用

[YutHelloWorld]

1. css函数－css函数中的变量，如calc(),url()等

$sidebar-width: 250px;
 .main { 
    width: calc(100% - $sidebar-width);
 }
//你会惊讶地发现，根本不work。没有报错，容器的大小却又不正确。如果你去审查你的dom元素，你会看到这个 — 被划掉了。因为，这是不合法的
//因为calc()是一个CSS函数，不是一个Sass函数。这就是说Sass会将整个表达式解释成一个字符串
$type-of-expression: type-of(calc(100% - $sidebar-width)); // string
.main{
    width:calc(100% - #{$sidebar-width});
}
//$sidebar-width被认为是一个常规字符串，所以打出来就是它自己,当我们用插值这样做时，Sass编译这个样式文件时，它会用#{$sidebar-width}的值，即
.main {
     width: calc(100% - 250px); 
}

@for $i from 1 through $max {
    .el:nth-of-type(#{$i}) { 
        ...
     }
}
//for循环和:nth-*()选择器一起使用。再一次说明，你需要使用插值变量，才能最终得到想得到的结果

2. css指令－如 @support , @page ,@media

//如果你的变量在@media字符串后面，需要使用插值才可以
$value : screen;
@media #{$value} {
    ...
}

//如果@media后面紧跟()，你就不再需要插值变量里，因为sass会求出所有在这些括号里的值
$value: 1336px; 
@media (max-width: $value) { 
    ... 
}

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} {
    .sidebar {
        @media (#{$feature}: #{$value}) {
           width: 500px;
        }
     }
}
//编译后
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .sidebar {width: 500px; } 
}

3. 选择器－使用变量作为一个选择器，或者选择器的一部分

$value : cunstom;
selector-#{$value} {
    property : value;
｝