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

[Sass运算]加法

程序中的运算是常见的一件事情,但在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行。但在 Sass 中,运算只是其基本特性之一。在 Sass 中可以做各种数学计算,在接下来的章节中,主要和大家一起探讨有关于 Sass 中的数学运算。

(一)、加法

加法运算是 Sass 中运算中的一种,在变量属性中都可以做加法运算。如:

.box {
  width: 20px + 8in;
}

编译出来的 CSS:

.box {
  width: 788px;
}

但对于携带不同类型的单位时,在 Sass 中计算会报错,如下例所示:

.box {
  width: 20px + 1em;
}

编译的时候,编译器会报错:“Incompatible units: 'em' and ‘px'.”

 

任务

在编辑器的第六行输入正确的代码,通过Sass的加法运算,计算出容器.container的宽度?

  1. $sidebar-width: 220px;
  2. $content-width: 720px;
  3. $gap-width: 20px;
  4.  
  5. .container {
  6. width: ?;
  7. margin: 0 auto;
  8. }
下一节