Sass 基本特性-运算 感觉满满都是坑
2015-11-15 17:54
387 查看
Sass中的基本运算
一、加法
在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行。但在 Sass 中,运算只是其基本特性之一。
sass做加法运算是可以不考虑参数带单位,但需要单位同一
加号可以不需要空格隔开
示例:
输出:
+ 还可以做字符链接
注意,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。 例如:
输出:
二、减法 - 需要注意空格了
示例:
输出:
三、乘法
能够支持多种单位(比如 em ,px , %);
如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可(多个乘数中只需要一个乘数提供单位,否则报错)。
示例:
输出:
四、除法
众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时,直接使用“/”符号做为除号时,将不会生效,编译时既得不到我们需要的效果,也不会报错。
需要给运算的外面添加一个小括号()才能执行除法运算
总结: ”/ ”符号被当作除法运算符时有以下几种情况:
如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
如果数值被圆括号包围。
如果数值是另一个数学表达式的一部分。
示例:
输出:
Sass 的除法运算还有一个情况。先回忆一下,在乘法运算时,如果两个值带有相同单位时,做乘法运算时,出来的结果并不是我们需要的结果。但在除法运算时,如果两个值带有相同的单位值时,除法运算之后会得到一个不带单位的数值。 示例:
输出:
练习:
五、颜色运算 - 分段运算
所有算数运算都支持颜色值,并且是分段运算的。也就是说,红、绿和蓝各颜色分段单独进行运算。如:
计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09, 并且被合一起
示例:
输出:
学习 大漠老师 - Sass入门篇 笔记 http://www.w3cplus.com/
一、加法
在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行。但在 Sass 中,运算只是其基本特性之一。
sass做加法运算是可以不考虑参数带单位,但需要单位同一
加号可以不需要空格隔开
示例:
$sidebar-width: 220px; $content-width: 720px; $gap-width: 20px; .container { width: $sidebar-width+$content-width + $gap-width; margin: 0 auto; }
输出:
.container { width: 960px; margin: 0 auto; }
+ 还可以做字符链接
注意,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。 例如:
p:before { content: "Foo " + Bar; font-family: sans- + "serif"; }
输出:
p:before { content: "Foo Bar"; font-family: sans-serif; }
二、减法 - 需要注意空格了
示例:
$full-width: 960px; $sidebar-width: 200px; .content { width: $full-width - $sidebar-width; }
输出:
.content { width: 760px; }
三、乘法
能够支持多种单位(比如 em ,px , %);
如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可(多个乘数中只需要一个乘数提供单位,否则报错)。
示例:
.box { width: 10px * 2; }
输出:
.box { width: 20px; }
四、除法
众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时,直接使用“/”符号做为除号时,将不会生效,编译时既得不到我们需要的效果,也不会报错。
需要给运算的外面添加一个小括号()才能执行除法运算
.box { width: (100px / 2); }
总结: ”/ ”符号被当作除法运算符时有以下几种情况:
如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
如果数值被圆括号包围。
如果数值是另一个数学表达式的一部分。
示例:
p { font: 10px/8px; // 纯 CSS,不是除法运算 $width: 1000px; width: $width/2; // 使用了变量,是除法运算 width: round(1.5)/2; // 使用了函数,是除法运算 height: (500px/2); // 使用了圆括号,是除法运算 margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算 }
输出:
p { font: 10px/8px; width: 500px; width: 1; height: 250px; margin-left: 9px; }
Sass 的除法运算还有一个情况。先回忆一下,在乘法运算时,如果两个值带有相同单位时,做乘法运算时,出来的结果并不是我们需要的结果。但在除法运算时,如果两个值带有相同的单位值时,除法运算之后会得到一个不带单位的数值。 示例:
.box { width: (1000px / 100px); }
输出:
.box { width: 10; }
练习:
.box { width: ((220px + 720px) - 11 * 20) / 12; } /*输出:*/ .box { width: 60px; }
五、颜色运算 - 分段运算
所有算数运算都支持颜色值,并且是分段运算的。也就是说,红、绿和蓝各颜色分段单独进行运算。如:
p { color: #010203 + #040506; }
计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09, 并且被合一起
示例:
p { background-color: #012345 + #543210; color:#123456 * 2; }
输出:
p { background-color: #555555; color: #2468ac; }
学习 大漠老师 - Sass入门篇 笔记 http://www.w3cplus.com/
相关文章推荐
- 删除MFC单文档默认菜单栏的两种方法
- oc中几种属性特质:nonatomic,copy,retain等
- junit中的assert方法总结
- hdu 2234 无题I (IDA*+dfs)
- 线程安全的单例模式
- Javascript实用方法
- FOJ有奖月赛-2015年11月-Problem B 函数求解
- 文章标题
- MVC,jquery异步
- 信息安全系统设计基础第十周学习总结
- 114 linux ubuntu开机卡在checking battery state
- OC学习心得之数据类型
- virtualbox 迁移 已安装系统
- jQUery中的$(document).ready()方法和window.onload()方法的区别
- VC和LUA混合开发之VC程序调用Lua脚本函数
- MATLAB实现cost function计算和gradience descent计算
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
- FOJ有奖月赛-2015年11月-据说题目很水
- Salvation
- 内存管理器(十七)kernel内存管理----slab设计与实现(分配对象)