学习Sass无非就是想高效的、 面向对象编写CSS,Sass中的Operations也是重要的一部分。
现在的前端各种工程化、模块化、面向工资编程,哦…不对,是面向对象编程。玩起来吧!
1. 加减法
加减法不是重点,重点是在SassScript中用到的两种单位之间的转换;
绝对单位:px, pt, pc, in, mm, cm…绝对单位都能运算;
相对单位:ex, em, rem…相对当前字体的都不能运算;
1.1 编译报错的栗子
SCSS:
$plus1: 100px + 20ex; //不能换算的编译都会报错;
$plus2: 100px + 20em;
$plus3: 100px + 20rem;
.plus{
width: $plus1 + 10px; //在变量或属性中均可做加减法运算;
}
编译报错:Incompatible units: 'ex' and 'px'.
Incompatible units: 'em' and 'px'.
Incompatible units: 'rem' and 'px'.
1.2 正常编译的栗子
SCSS:
$minus1: 100px - 20; //第二个值可不带单位;
$minus2: 100pt - 20px; //运算是从左到右,如第二个值的单位不同于第一个值的单位(pt),
$minus3: 100px + 20cm; //将会对其进行转换(pt)后再运算;编译出来的值的单位也是(pt);
$minus4: 100rem; //可以正常编译输出;
$minus5: 100rem + 10em; //报错;--Incompatible units: 'em' and 'rem'.);
.minus{
width: $minus1;
height: $minus1 + 30; //在属性还可以继续做运算;
min-width: $minus2;
min-height: $minus3;
max-width: $minus4;
max-height: $minus1 + $minus2;
}
//普遍情况下很少会搞两个单位在那加加减减,闲得蛋疼,反正我不会,在这只是举个栗子。
被编译为:
.minus {
width: 80px;
height: 110px;
min-width: 85pt;
min-height: 855.90551px;
max-width: 100rem;
max-height: 193.33333px;
}
2. 乘法
SassScript中的乘法运算和加减法运算还略有不同。虽然他也能够支持多种单位(比如 em ,px , %),但当一个单位同时声明两个值时会有问题。比如下面的示例:
SCSS:
.ride { width: 20px * 10px; }
编译报错:20px*px isn't a valid CSS value.
如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可。改成:
SCSS:
.ride { width: 20px * 10; }
编译输出:
.ride { width: 200px; }
在乘法运算中如有不同类型的单位时,也将会报错。
SCSS:
.ride { width: 20px * 10rem; }
编译报错:200px*rem isn't a valid CSS value.
2.1 结合#@for来个好玩的
雪碧图一般都用
compass
的@import "compass/utilities/sprites";
来玩
SCSS:
$icon-list: down, up, file, hot;
@for $c from 1 through length($icon-list){
.icon-#{nth($icon-list,$c)}{
background-position: 0 -30px * $c;
}
}
被编译为:
.icon-down {
background-position: 0 -30px;
}
.icon-up {
background-position: 0 -60px;
}
.icon-file {
background-position: 0 -90px;
}
.icon-hot {
background-position: 0 -120px;
}
3. 除法
CSS 允许 / 出现在属性值里,作为分隔数字的一种方法。 既然 SassScript 是 CSS 属性语法的扩展, 他就必须支持这种语法,同时也允许 / 用在除法运算上。 也就是说,默认情况下,在 SassScript 里用 / 分隔的两个数字, 都会在 CSS 中原封不动的输出。
SCSS:
.main {
font: 10px/8px; // 纯 CSS,不是除法运算
$width: 100px;
width: $width/2; // 使用了变量,是除法运算
width: round(1.5)/2; // 使用了函数,是除法运算
height: (500px/2); // 使用了圆括号,是除法运算
margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height}; //纯CSS中使用变量和 /, 可以用 #{} 包住变量;
}
被编译为:
.main {
font: 10px/8px;
width: 50px;
width: 1;
height: 250px;
margin-left: 9px;
font: 12px/30px;
}
4. 来个栗子试试——颜色运算
所有算数运算都支持颜色值, 并且是分段运算的。 也就是说,红、绿、蓝各颜色分量会单独进行运算。例如:
.main-col{ color: #106021 + #023212; }
计算公式为 01 + 04 = 05
、02 + 05 = 07
和 03 + 06 = 09
,
被编译为:
.main-col { color: #129233; }
算数运算也能将数字和颜色值一起运算,同样也是分段运算的。 例如:
p { color: #010203 * 2; }
计算公式为 01 * 2 = 02
、02 * 2 = 04
和 03 * 2 = 06
,
被编译为:
p { color: #020406; }
IE 滤镜需要每个颜色都包含 alpha 层, 并且得用 #AABBCCDD
这样严格的格式。你可以轻松的利用 {Sass::Script::Functions#ie_hex_str ie_hex_str}
函数对其做转换。 例如:
$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
filter: progid:DXImageTransform.Microsoft.gradient(
enabled='false',
startColorstr='#{ie-hex-str($green)}',
endColorstr='#{ie-hex-str($translucent-red)}'
);
}
被编译为:
div {
filter: progid:DXImageTransform.Microsoft.gradient(
enabled='false',
startColorstr=#FF00FF00,
endColorstr=#80FF0000
);
}
4. 最后一个栗子——字符运算
+
运算符可以用来连接字符串:
p { cursor: e + -resize; }
被编译为:
p { cursor: e-resize; }
注意,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 +
符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 +
符号左侧), 结果将是一个没有引号的字符串。 例如:
$c: "Hello" + " " + "Sass!";
.box:before {
content: " #{$c} ";
}
被编译为:
.box:before {
content: " Hello Sass! ";
}
5. Reference API
SASS_REFERENCE — Sass Documentation #Operations
如有不正之处,欢迎指正。
学完整理整理,方便查阅。
更高级的用法还在后面…