scss运算
数字运算
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。
加法运算演示:
从上面运算可以看出:
无单位数字 和 无单位数字 可以直接运算,结果为无单位数字
无单位数字 和 有单位数字 可以直接运算,结果为有单位数字
有单位数字 和 有单位数字 运算时,
如果单位相同,则可以直接运算,结果为有单位数字
如果单位不同,则看两个单位之间是否可以互相转化,若可以则转化为前面的单位后运算,若不可以则编译报错,比如pt和px可以互相转化,但是px和rem无法互相转化,px和%无法互相转化。
减法运算演示:
和+运算同理。
乘法运算演示:
*运算需要注意的是,不仅数字会相乘,单位也会相乘,因此*运算中,不能进行有单位数字和有单位数字的乘法,只能进行有单位数字和无单位数字,无单位数字和无单位数字的乘法。
除法运算演示:
在scss中,以下三种情况会进行除法运算:
- 如果值或值的一部分,是变量或者函数的返回值;
- 如果值被圆括号包裹;
- 如果值是算数表达式的一部分。
$width: 1000px;
div {
font: 16px/30px Arial, Helvetica, sans-serif; // 不运算
width: ($width/2); // 使用变量与括号,可运算
width: (#{$width}/2); // 使用 #{} 插值语句将变量包裹,避免运算。
z-index: round(10)/2; // 使用了函数,可运算
height: (500px/2); // 使用了括号,可运算
margin-left: 5px + 8px/2px; // 使用了+表达式,可运算
}
%运算演示:
求余运算符和百分号单位符号相同,因此求余运算时,我们必须要保证%求余运算符两边有空格,否则%会被当成百分号,如上例子。
其实,不仅仅是求余运算符两边要加空格,所有运算符两侧都建议加空格,避免歧义。
其实本质上来说,求余运算也算除法运算的一种,只是除法运算结果是商,求余运算结果是余数。
通过上面例子,我们可以发现,SCSS求余运算和除法运算存在区别:
- 无单位数字之间可以直接求余,结果也无单位
- 无单位和有单位数字之间可以直接求余,结果有单位
- 有单位数字之间求余,
- 如果单位相同,则结果单位就是除数、被除数的单位,
- 如果单位不同,则看是否可以转化,若可以转化,则结果单位就是被除数的单位,若不可以转化则编译报错
颜色值运算
p {
color: #010203 + #040506;
}
编译后的CSS:
p {
color: #050709;
}
数字与颜色值运算
p {
color: #010203 * 2;
}
编译后的CSS:
p {
color: #020406;
}
算术运算不会作用于 alpha 值
如果颜色值包含 alpha channel(rgba 或 hsla 两种颜色值),必须拥有相等的 alpha 值才能进行运算,因为算术运算不会作用于 alpha 值。
p {
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
编译为
p {
color: rgba(255, 255, 0, 0.75);
}
alpha的调整
颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。
$translucent-red: rgba(255, 0, 0, 0.5);
p {
color: opacify($translucent-red, 0.3);
background-color: transparentize($translucent-red, 0.25);
}
编译为
p {
color: rgba(255, 0, 0, 0.8);
background-color: rgba(255, 0, 0, 0.25);
}
字符串运算 (String Operations)
+ 用于连接字符串
p {
cursor: e + -resize;
}
编译为
p {
cursor: e-resize;
}
引号的影响
注意,如果有引号字符串(位于 + 左侧)连接无引号字符串,运算结果是有引号的,相反,无引号字符串(位于 + 左侧)连接有引号字符串,运算结果则没有引号。
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
编译为
p:before {
content: "Foo Bar";
font-family: sans-serif;
}
运算与其他值连用
运算表达式与其他值连用时,用空格做连接符。
p {
margin: 3px + 4px auto;
}
编译为
p {
margin: 7px auto;
}
等号运算
等号运算有两个运算符:
- ==:等于
- !=:不等于
等号运算可以用于比较任意类型的值,等号运算的结果为布尔值,等号运算常用于条件判断
等号运算其实也算是比较运算,但是SCSS中等号运算却被从比较运算中分离出来,这是因为等号运算可以比较任意类型的值,但是比较运算只能比较数字。
比较运算
比较运算有如下运算符:
- <
- <=
- >
- >=
SCSS中比较运算符只能比较数字类型的值,不能比较其他类型。
如果比较非数字类型的值,SCSS编译会报错
逻辑运算
布尔运算符: SASS 有三个布尔运算符两个是二元:and
、or
一个是一元:not
。
二元运算符:
-
and:
语法:
html expression1 and expression2
只有当两个表达式的计算结果都为真时,最终的布尔值才为真,否则为假。
-
or:
语法:
html expression1 or expression2
只有当任何表达式的计算结果为真时,最终的布尔值才为真,否则为假。
一元运算符:
-
not:
语法:
html not expression
最终的布尔值将与表达式值相反。
需要注意的是,not运算符作用的条件需要用()包裹,避免歧义,如下例子: