sass-#{}插值语句

插值语句语法

    插值语句实际上就是原本的将值插入到语句之后再进行编译
    #{变量名}
    可插入：选择器、属性名、属性值、注释

1.插入选择器

$footer:footer;

.#{$footer}{
    color:red;
}

生成css代码:(实际就是原原本本的替换值)
.footer{
    color:red;
}

2.插入属性名

$color:color

.footer{
    #{$color}:red;
}

生成css代码:
.footer{
    color:red;
}

3.插入到属性值(较少用)

$font-size:12px;

.bar{
    color:#{$font-size};
}

生成css代码:
.bar{
    color:12px;
}

4.插入到注释中(会替换注释中的插值语句)

$author:peng;              
/*
    author:#{$author}   
*/

生成css代码:
/*
    athor:peng
*/