sass 运算
2015-11-01 21:01
344 查看
[b] (一)、加法[/b] 加法运算是 Sass 中运算中的一种,在变量或属性中都可以做加法运算。如: .box { width: 20px + 8in; } 编译出来的 CSS: .box { width: 788px; } 但对于携带不同类型的单位时,在 Sass 中计算会报错,如下例所示: .box { width: 20px + 1em; } 编译的时候,编译器会报错:“Incompatible units: 'em' and ‘px'.” [b](二)减法[/b] Sass 的减法运算和加法运算类似,我们通过一个简单的示例来做阐述: $full-width: 960px; $sidebar-width: 200px; .content { width: $full-width - $sidebar-width; } 编译出来的 CSS 如下: .content { width: 760px; } 同样的,运算时碰到不同类型的单位时,编译也会报错,如: $full-width: 960px; .content { width: $full-width - 1em; } 编译的时候,编译器报“Incompatible units: 'em' and ‘px’.”错误。 [b](三)乘法[/b] 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.”错误信息。 [b](四)除法[/b] Sass 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时,直接使用“/”符号做为除号时,将不会生效,编译时既得不到我们需要的效果,也不会报错。一起先来看一个简单的示例: .box { width: 100px / 2; } 编译出来的 CSS 如下: .box { width: 100px / 2; } 这样的结果对于大家来说没有任何意义。要修正这个问题,只需要给运算的外面添加一个小括号( )即可: .box { width: (100px / 2); } 编译出来的 CSS 如下: .box { width: 50px; } 除了上面情况带有小括号,“/”符号会当作除法运算符之外,如果“/”符号在已有的数学表达式中时,也会被认作除法符号。如下面示例: .box { width: 100px / 2 + 2in; } 编译出来的CSS: .box { width: 242px; } 另外,在 Sass 除法运算中,当用变量进行除法运算时,“/”符号也会自动被识别成除法,如下例所示: $width: 1000px; $nums: 10; .item { width: $width / 10; } .list { width: $width / $nums; } 编译出来的CSS: .item { width: 100px; } .list { width: 100px; } 综合上述,”/ ”符号被当作除法运算符时有以下几种情况: • 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。 • 如果数值被圆括号包围。 • 如果数值是另一个数学表达式的一部分。 如下所示: //SCSS p { font: 10px/8px; // 纯 CSS,不是除法运算 $width: 1000px; width: $width/2; // 使用了变量,是除法运算 width: round(1.5)/2; // 使用了函数,是除法运算 height: (500px/2); // 使用了圆括号,是除法运算 margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算 } 编译出来的CSS p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; } Sass 的除法运算还有一个情况。我们先回忆一下,在乘法运算时,如果两个值带有相同单位时, 做乘法运算时,出来的结果并不是我们需要的结果。但在除法运算时,如果两个值带有相同的单位值时, 除法运算之后会得到一个不带单位的数值。如下所示: .box { width: (1000px / 100px); } 编译出来的CSS如下: .box { width: 10; } [b](五)变量计算[/b] 在 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; } [b](六)数字运算[/b] 在 Sass 运算中数字运算是较为常见的,数字运算包括前面介绍的:加法、减法、乘法和除法等运算。 而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的,一起来看个示例。 .box { width: ((220px + 720px) - 11 * 20 ) / 12 ; } 编译出来的 CSS: .box { width: 60px; } 上面这个简单示例是一个典型的计算 Grid 单列列宽的运算。 [b] (七)颜色运算[/b] 所有算数运算都支持颜色值,并且是分段运算的。也就是说,红、绿和蓝各颜色分段单独进行运算。如: p { color: #010203 + #040506; } 计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09, 并且被合成为: 如此编译出来的 CSS 为: p { color: #050709; } 算数运算也能将数字和颜色值 一起运算,同样也是分段运算的。如: p { color: #010203 * 2; } 计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06, 并且被合成为: p { color: #020406; } [b](八)字符运算[/b] 在 Sass 中可以通过加法符号“+”来对字符串进行连接。例如: $content: "Hello" + "" + "Sass!"; .box:before { content: " #{$content} "; } 编译出来的CSS: .box:before { content: " Hello Sass! "; } 除了在变量中做字符连接运算之外,还可以直接通过 +,把字符连接在一起: div { cursor: e + -resize; } 编译出来的CSS: div { cursor: e-resize; } 注意,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。 例如: p:before { ontent: "Foo " + Bar; font-family: sans- + "serif"; } 编译出来的 CSS: p:before { content: "Foo Bar"; font-family: sans-serif; }
[b] 整理自mooc[/b]
相关文章推荐
- Hadoop学习之shuffle过程
- Java调用R(一)
- VIM中的正则表达式
- Mangos源码分析(9):服务器公共组件实现之环形缓冲区
- 2015.10.31--- 2015.沈阳
- cf # 1 B. Spreadsheets
- 内连接、左外连接、右外连接、交叉连接区别
- 《剑指offer》——替换空格
- 信息安全系统设计基础第八周期中复习总结
- Android之ListView的优化
- lsof 进程与文件
- 疯狂java讲义4.2--浮点数转换成人民币读法
- Mangos源码分析(8):服务器公共组件实现之消息队列
- Hibernate4 HelloWorld
- hdu 5536 trie树
- SQL转Java代码小工具(改进)
- Git/Framework静态库介绍:创建和使用
- android 实现自动换行的流布局
- 解决Java项目库文件困扰的两个eclipse插件
- HDOJ 题目5510 Bazinga(瞎搞)