Sass学习之路(11)——Sass运算
来源:互联网 发布:程序员对浏览器的 编辑:程序博客网 时间:2024/04/28 11:51
程序中的运算是非常唱见的一件事情,而运算也是Sass中的一项基本属性,在Sass中可以进行各种数学计算。
1.加法
在变量和属性中,都可以做加法运算。看一个例子:
.box { width: 20px + 8in;}编译出的CSS:
.box { width: 788px;}这里解释一下in这个单位,in是指英寸,1英寸等于96px,所以最后编译的结果是20px+8*96px=778px。
tips:in mm cm pt pc px这样的绝对单位都能进行运算,计算时会换算成px,如果是无法换算的单位,就会报错。
但是ex em rem这样的相对单位都不能进行计算,否则会报错。
2.减法
减法和加法是非常类似的,我们来看一个例子:
$full-width: 960px;$sidebar-width: 200px;.content { width: $full-width - $sidebar-width;}编译出的CSS:
.content { width: 760px;}减法中的注意事项与加法也基本相同。
3.乘法
乘法运算和加减法略有不同,虽然他可以支持多种单位,如px,em,%等,但相乘的两个值不能都带有单位,否则会报错。例如:
.box { width:10px * 2px; }编译时会报出错误,正确的写法如下:
.box { width: 10px * 2;}这时会编译出:
.box { width: 20px;}
4.除法
Sass的乘法运算规则也适用于除法,但也有些许不同。Sass中除法运算符"/"直接使用,很多情况下不会被当作运算符,而直接显示出来,没有任何效果也不报错。例如:
.box { width: 100px / 2; }编译后如下:
.box { width: 100px / 2;}这样的结果显然没有任何意义。要修正这个问题,值需要在外边套一个小括号即可:
.box { width: (100px / 2); }编译后:
.box { width: 50px;}这样就成功的做出的除法运算,除了添加括号外,如果"/"符号出现在地方已经有了其他的数学表达式,也会被当作除号运算,例如:
.box { width: 100px / 2 + 2in; }这时不加括号也可以成功运算出结果:
.box { width: 242px;}还有最后一种情况,就是除数或者被除数有任意一方是变量,那么"/"也会被当作除号运算,例如:
$width: 1000px;$nums: 10;.item { width: $width / 10; }.list { width: $width / $nums;}结果如下:
.item { width: 100px;}.list { width: 100px;}
5.颜色运算
Sass中的所有算数运算方式都支持颜色值,而且是依据红绿蓝三元色的值进行分段计算的,例如:
p { color: #010203 + #040506;}计算出的三原色的值分别是01+04=05,02+05=07,03+06=09,最后编译的结果是:
p { color: #050709;}类似的,乘法运算同样也是分段式的:
p { color: #010203 * 2;}编译后:
p { color: #020406;}
6.字符运算
Sass中的字符运算是通过"+"来对字符串进行连接,和JS中的字符串拼接非常相似。例如:
$content: "Hello" + "" + "Sass!";.box:before { content: " #{$content} ";}编译后:
.box:before { content: " Hello Sass! ";}在Sass中无论是有引号字符串还是无引号字符串,都可以用这种方式进行连接。但是有一个规则:
(1)两个有引号字符串连接,结果是有引号的字符串。两个无引号字符串连接,结果是无引号字符串。
(2)有引号字符串和无引号字符串连接,结果取决于加号前边的字符串。前边的是有引号字符串,结果就是有引号字符串,反过来就是无引号字符串。例如:
p:before { content: "Foo " + Bar; font-family: sans- + "serif";}编译结果如下:
p:before { content: "Foo Bar"; font-family: sans-serif; }
那么,关于Sass的运算就到这里啦~
2 0
- Sass学习之路(11)——Sass运算
- Sass学习之路(1)——Sass简介
- Sass学习之路(3)——Sass编译
- Sass学习之路(2)——Sass环境安装(windows版)
- 学习sass之安装sass
- sass学习之安装sass
- 10天精通Sass 之 Sass运算
- Sass学习之路(5)——变量
- Sass学习之路(6)——嵌套
- Sass学习之路(7)——混合宏
- Sass学习之路(9)——插值 #{}
- Sass学习之路(10)——注释、数据类型
- Sass学习之路(12)——控制命令
- Sass学习之路(13)——字符串函数
- Sass学习之路(14)——数字函数
- Sass学习之路(15)——列表函数(一)
- sass学习——SassScript
- Sass学习之快速上手bootstrap-sass
- java基础
- JAVA面试题和项目面试核心要点精华总结(想进大公司必看)
- git上传java项目代码(初次上传,以后可以用elipse插件上传)
- Java 反转链表的两种方法
- 将一个数组分割成两个两个一组
- Sass学习之路(11)——Sass运算
- 【数据结构】数据结构C语言的实现(单链表)
- 3D游戏引擎技术架构设计
- 【数据结构】数据结构C语言的实现(栈)
- nodejs初始化init
- openGL绘制正方体分别实现简单颜色绘制、纹理绘制、光照绘制
- 【数据结构】数据结构C语言的实现(队列)
- 互联网公司社会招聘Java工程师面试题整理(1)
- 优酷视频下载爬虫