10天精通Sass 之 Sass运算
2016-08-15 09:57
381 查看
CSS中目前只有calc()能做运算,但是在Sass中,可以做各种数学运算。
编译出来的CSS:
1in = 96px;
当em,rem等相对当前字体,于px在一起不能运算,会报错,如:
不过如果其中一个不同单位,那么会以另一个带单位的为准,如:
编译出来的CSS为:
编译出来的CSS:
减法和加法一样,不支持em,rem等相对当前字体大小的单位与px进行计算。
如:
编译时会报错。
而:
编译出来的CSS:
与加减法一样,不同类型的单位运算时会报错。
如:
编译出来的CSS:
要修正这个文字,只需要给运算的外面添加一对小括号即可。
编译出来的CSS为:
除了小括号以外,如果除了 “/” 外,还有其它的运算符号,那么也会被当作除号看待。
编译出来的CSS为:
另外,如果是用变量进行除法运算,”/”也会自动被识别为除法。
如:
编译出来的CSS为:
综合上述,”/ ”符号被当作除法运算符时有以下几种情况:
如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
如果数值被圆括号包围。
如果数值是另一个数学表达式的一部分。
在除法运算时,如果两个值带有相同的单位值时,除法运算之后会得到一个不带单位的数值。
关于单位计算的问题,同物理倒是非常像。
如果不想记”/”的规则,那么在想作为除法使用是,加上一个括号即可。
如:
编译出的CSS为:
同样颜色值也支持乘法运算:
编译出来的CSS:
运算规则和二进制乘法相同,依次与每一位相乘。个人觉得颜色值的运算意义不是很大。
编译出来的CSS为:
除了在变量中做字符连接运算之外,还可以直接通过 +,把字符连接在一起:
编译出来的CSS为:
==注意==:如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。 也就是说始终与加号左边的保持一致:
编译出来的CSS为:
加法
.box{ width: 20px + 8in; }
编译出来的CSS:
.box { width: 788px; }
1in = 96px;
当em,rem等相对当前字体,于px在一起不能运算,会报错,如:
.box{ width: 20px + 8em; }
不过如果其中一个不同单位,那么会以另一个带单位的为准,如:
.box{ width: 20px + 8; } .box2{ width: 20em + 8; }
编译出来的CSS为:
.box { width: 28px; } .box2 { width: 28em; }
减法
$container: 960px; $sidebar-width: 220px; $gap-width: 20px; .content{ width: $container - $sidebar-width - $gap-width; float: left; }
编译出来的CSS:
.content { width: 720px; float: left; }
减法和加法一样,不支持em,rem等相对当前字体大小的单位与px进行计算。
乘法
乘法运算时,只需要其中一个带单位即可,如果都带有单位会报错,如:
.box{ width: 20px * 20px }
编译时会报错。
而:
.box{ width: 20px * 20; }
编译出来的CSS:
.box{ width: 400px; }
与加减法一样,不同类型的单位运算时会报错。
除法
Sass的乘法运算规则也适用于除法运算,不过除法运算有特殊之处,因为”/”符号在CSS中已经作为一种符号使用,因此在Sass中直接使用”/”作为处好时,将不会生效,编译时既不会报错,也不会得到我们想要的效果。如:
.box{ width: 100px / 2; }
编译出来的CSS:
.box { width: 100px / 2; }
要修正这个文字,只需要给运算的外面添加一对小括号即可。
.box{ width: (100px / 2); }
编译出来的CSS为:
.box { width: 50px; }
除了小括号以外,如果除了 “/” 外,还有其它的运算符号,那么也会被当作除号看待。
.box { width: 100px / 2 + 20px; }
编译出来的CSS为:
.box { width: 70px; }
另外,如果是用变量进行除法运算,”/”也会自动被识别为除法。
如:
$width: 960px; .col { width: $width / 10; }
编译出来的CSS为:
.col { width: 96px; }
综合上述,”/ ”符号被当作除法运算符时有以下几种情况:
如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
如果数值被圆括号包围。
如果数值是另一个数学表达式的一部分。
在除法运算时,如果两个值带有相同的单位值时,除法运算之后会得到一个不带单位的数值。
关于单位计算的问题,同物理倒是非常像。
如果不想记”/”的规则,那么在想作为除法使用是,加上一个括号即可。
颜色运算
所有的运算都支持颜色值。如:
p { color: #010203 + #040506; }
编译出的CSS为:
p { color: #050709; }
同样颜色值也支持乘法运算:
p { color: #010203 * 2; }
编译出来的CSS:
p { color: #020406; }
运算规则和二进制乘法相同,依次与每一位相乘。个人觉得颜色值的运算意义不是很大。
字符运算
在Sass中可以用”+”号对字符串进行拼接,如:$content: "Hello" + "" + "Sass!"; .box{ &:after{ content: $content; } &:before{ content: " #{$content} "; } }
编译出来的CSS为:
.box:after { content: "HelloSass!"; } .box:before { content: " HelloSass! "; }
除了在变量中做字符连接运算之外,还可以直接通过 +,把字符连接在一起:
div{ cursor: e + -resize; } span{ cursor: "e" + "-resize"; }
编译出来的CSS为:
div { cursor: e-resize; } span { cursor: "e-resize"; }
==注意==:如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。 也就是说始终与加号左边的保持一致:
p:before { content: "Foo " + Bar; font-family: sans- + "serif"; }
编译出来的CSS为:
p:before { content: "Foo Bar"; font-family: sans-serif; }
相关文章推荐
- 5个最佳的Android测试框架(带示例)
- Oracle Http Server安装mod_python,运行报错fatal: Not a git repository (or any of the parent directories)
- 使用SourceTree更好的理解git
- Java客户端Jedis的八种调用方式
- Axure原型制作规范
- 详细介绍如何使用kindEditor编辑器
- sql server--优化
- POJ1386Play on Words(欧拉回路)
- BufferKnife及插件使用
- Java之IO流学习总结【上】
- 关键词匹配(Ac自动机模板题)
- Zju1290 Word-Search Wonder(http://begin.lydsy.com/JudgeOnline/problem.php?id=2768)
- begin lydsy 2731
- 几种哈希算法原理(转发)
- 编译fdk-aac for ios
- 2016——3——16 kmp 7题
- 【疑难杂症】webview与scrollview嵌套碰到的难题!webview高度在横屏后更改!
- bzoj3942——2016——3——15
- bzoj1355——2016——3——15
- poj 3641 ——2016——3——15