数字

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在 Sass 里面,高度的值,宽度的值,边框的宽度,这些东西都属于数字类型的值,这些的值里面还可能会包含单位,比如 px ,em ,或者 % ... 在 Sass 里面,我们可以使用加,减,乘,除,或者求余数这些算术运算,去处理数字类型的值。得到的结果里面,会包含数字值的单位。

下面,我们在 Sass 的交互 shell 里面,去试一下数字的运算。

2 + 8 .... 结果是 10 ,注意这个结果的周围没有引号,表示这是一个数字类型的值 ..

2 * 8 ... 等于 16 . .. 再试一下除法运算 ... 8 / 2 ... 得到的结果是 8/2 .. 这是因为在 CSS 里面,有些属性的值会用到这种 / 的方式 ... 比如 font 这个属性 ... (font: 16px/1.8 Georgia;) .. 在这条样式里,/ 前面的 16px 表示字号,/ 后面的 1.8 表示行间距 ..

所以 Sass 会保留这样的写法 ... 如果你想去使用除法运算的法,我们可以把这个表达式放到一个括号里 ... 像这样 ... (8 / 2) ... 这次得到的就是 8 除以 2 的结果 .. 也就是 4 ...

在运算的时候,数字类型的值也可以包含单位 ... 5px + 5px ... 结果会是 10 px ... 5px - 2 ... 结果等于 3px ...

5px * 2 ... 结果是 10px ... 再试一下 5px * 2px ... 你会发现,结果是 10px*px ... px*px 在 CSS 里面并不是可用的单位,所以,你需要注意一下 ...

(10px / 2px) ... 等于 5 ... 在除的时候,两个单位会被去掉 .. 如果是 (10px / 2 ) ... 这样结果里面会保留 10px 里面的单位 ... 结果就是 5px ..

再来个加减乘除,混合运算 ... 3 + 2 * 5px ... 结果是 13px ... 因为这里要先算乘除,再算加减,这些都是我们在小学里学的数字... 2 * 5px 是 10px ... 3 + 10px ,结果就是 13px ..

想要改变运算顺序的话,可以使用括号 ... (3 + 2) * 5px ... 这样会先去算出 3 + 2 的结果 .. 是 5 ,再用 5 去乘以 5px ,结果就是 25px ...

数字《 Sass 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点