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

[Sass运算]变量计算

在 Sass 中除了可以使用数值进行运算之外,还可以使用变量进行计算,其实在前面章节的示例中也或多或少的向大家展示了。在 Sass 中使用变量进行计算,这使得 Sass 的数学运算功能变得更加实用。一起来看一个简单的示例:

$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;

.container {
  width: $content-width + $sidebar-width + $gutter;
  margin: 0 auto;
}

编译出来的CSS

.container {
  width: 960px;
  margin: 0 auto;
}

任务

在编辑器第六行输入正确代码,计算出每列的列宽

  1. $col-width: 60px;
  2. $col-gap: 20px;
  3.  
  4. @for $i from 1 through 12 {
  5. .col-#{$i}{
  6. width:?;
  7. }
  8. }
下一节