SASS 插值语句 #{ }

引入之前的案例发出一个问题

例如

p{
    font: 16px/30px Arial, Helvetica, sans-serif; 
}

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

使用插值语法：

p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height} Helvetica,
    sans-serif;
}

通过 #{} 插值语句可以在选择器、属性名、注释中使用变量：

$class-name: danger;
$attr: color;
$author:'老姚';

/* 
   * 这是文件的说明部分
    @author: tpframe
 */

a.#{$class-name} {
    border-#{$attr}: #F00;
}