5-3 [Sass运算]乘法
本节编程练习不计算学习进度,请电脑登录imooc.com操作

[Sass运算]乘法

Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位(比如 em ,px , %),但当一个单位同时声明两个值时会有问题。比如下面的示例:

.box {
  width:10px * 2px;  
}

编译的时候报“20px*px isn't a valid CSS value.”错误信息。

如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可。上面的示例可以修改成:

.box {
  width: 10px * 2;
}

编译出来的 CSS:

.box {
  width: 20px;
}

Sass 的乘法运算和加法、减法运算一样,在运算中有不同类型的单位时,也将会报错。如下面的示例:

.box {
  width: 20px * 2em;
}

编译时报“40em*px isn't a valid CSS value.”错误信息。

任务

在编辑器第5行输入正确的代码,让icon图标的background-position的y轴值按20px递增。

  1. $list: twitter,facebook,github,weibo;
  2.  
  3. @for $i from 1 through length($list){
  4. .icon-#{nth($list,$i)}{
  5. background-postion: 0 -? * $i;
  6. }
  7. }
下一节