Sass-字符串插值

1,简单的字符串插值

sass文件 common.scss

//字符串插值
$sina:'http://imgs.sina.com.cn/2017-01-01/topic/images/icon/';

.content{
  background:url(#{$sina}a.jpg) left top no-repeat;
}

sass编译后:

.content {
  background: url(http://imgs.sina.com.cn/2017-01-01/topic/images/icon/a.jpg) left top no-repeat; }

---

2,字符串插值和运算

sass文件common.scss

//避免运算
//sass中的运算必须有空格间隔
$width : 400px;
.ys{
  color:#F00 + 255;
  width: $width / 2;
  $fs:12px;
  $lh:24px;
  font:#{$fs}/#{$lh} "Microsoft YaHei","微软雅黑";
}

sass编译后:

.ys {
  color: white;
  width: 200px;
  font: 12px/24px "Microsoft YaHei", "微软雅黑"; }

以上是我们想要实现的正确CSS输出

color,width属性的输出

需要注意的是:
    在font:#{$fs}/#{$lh} "Microsoft YaHei","微软雅黑";中
    使了的字符串插值,避免了变量进行运算,正确输出

如果不使用字符串插值,改为以下

.ys{
  $fs:12px;
  $lh:24px;
  font:$fs/$lh "Microsoft YaHei","微软雅黑";
}

sass编译后输出

.ys {
  font: 0.5 "Microsoft YaHei", "微软雅黑"; } 

//我们看到$fs/$lh的输出结果是运算后的结果0.5,是错误的

所以 字符串插值的另外一个作用是阻止运算