CSS之运算，Sass 之运算（加、减、乘、除）

1. 加减法

加减法不是重点，重点是在SassScript中用到的两种单位之间的转换；
绝对单位：px, pt, pc, in, mm, cm...绝对单位都能运算；
相对单位：ex, em, rem...相对当前字体的都不能运算；

1.1 编译报错的栗子

---

SCSS：

 1 $plus1: 100px + 20ex; //不能换算的编译都会报错;
 2 $plus2: 100px + 20em;
 3 $plus3: 100px + 20rem;
 4 .plus{
 5     width: $plus1 + 10px; //在变量或属性中均可做加减法运算;
 6 }
 7 编译报错：
 8 Incompatible units: 'ex' and 'px'.
 9 Incompatible units: 'em' and 'px'.
10 Incompatible units: 'rem' and 'px'.

 

1.2 正常编译的栗子

---

SCSS：

 1 $minus1: 100px - 20; //第二个值可不带单位；
 2 $minus2: 100pt - 20px; //运算是从左到右，如第二个值的单位不同于第一个值的单位(pt)，
 3 $minus3: 100px + 20cm; //将会对其进行转换(pt)后再运算；编译出来的值的单位也是(pt);
 4 $minus4: 100rem; //可以正常编译输出;
 5 $minus5: 100rem + 10em; //报错;--Incompatible units: 'em' and 'rem'.);
 6 .minus{
 7     width: $minus1;
 8     height: $minus1 + 30; //在属性还可以继续做运算；
 9     min-width: $minus2;
10     min-height: $minus3;
11     max-width: $minus4;
12     max-height: $minus1 + $minus2;
13 }

	//普遍情况下很少会搞两个单位在那加加减减，闲得蛋疼，反正我不会，在这只是举个栗子。

被编译为：

1 .minus {
2   width: 80px;
3   height: 110px;
4   min-width: 85pt;
5   min-height: 855.90551px;
6   max-width: 100rem;
7   max-height: 193.33333px;
8 }

 

2. 乘法

SassScript中的乘法运算和加减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。比如下面的示例：

SCSS：

1 .ride { width: 20px * 10px; }

编译报错：

1 20px*px isn't a valid CSS value.

 

如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。改成：

SCSS：

1 .ride { width: 20px * 10; }

	编译输出：

1 .ride { width: 200px; }

在乘法运算中如有不同类型的单位时，也将会报错。

SCSS：

1 .ride { width: 20px * 10rem; }

编译报错：

1 200px*rem isn't a valid CSS value.

 

2.1 结合#@for来个好玩的

雪碧图一般都用compass的@import "compass/utilities/sprites";来玩

SCSS：

1 $icon-list: down, up, file, hot;
2 @for $c from 1 through length($icon-list){
3   .icon-#{nth($icon-list,$c)}{
4       background-position: 0 -30px * $c;
5   }
6 }

 

被编译为：

 1 .icon-down {
 2   background-position: 0 -30px;
 3 }
 4 .icon-up {
 5   background-position: 0 -60px;
 6 }
 7 .icon-file {
 8   background-position: 0 -90px;
 9 }
10 .icon-hot {
11   background-position: 0 -120px;
12 }

 

3. 除法

CSS 允许 / 出现在属性值里，作为分隔数字的一种方法。 既然 SassScript 是 CSS 属性语法的扩展， 他就必须支持这种语法，同时也允许 / 用在除法运算上。 也就是说，默认情况下，在 SassScript 里用 / 分隔的两个数字， 都会在 CSS 中原封不动的输出。

SCSS：

 1 .main {
 2   font: 10px/8px;             // 纯 CSS，不是除法运算
 3   $width: 100px;
 4   width: $width/2;            // 使用了变量，是除法运算
 5   width: round(1.5)/2;        // 使用了函数，是除法运算
 6   height: (500px/2);          // 使用了圆括号，是除法运算
 7   margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
 8 
 9   $font-size: 12px;
10   $line-height: 30px;
11   font: #{$font-size}/#{$line-height}; //纯CSS中使用变量和 /， 可以用 #{} 包住变量；
12 }

 

被编译为：

1 .main {
2   font: 10px/8px;
3   width: 50px;
4   width: 1;
5   height: 250px;
6   margin-left: 9px;
7   font: 12px/30px;
8 }

 

4. 来个栗子试试——颜色运算

所有算数运算都支持颜色值， 并且是分段运算的。 也就是说，红、绿、蓝各颜色分量会单独进行运算。例如：

1 .main-col{ color: #106021 + #023212; }
2 计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09，
3 被编译为：
4 
5 .main-col { color: #129233; }

 

算数运算也能将数字和颜色值一起运算，同样也是分段运算的。 例如：

1 p { color: #010203 * 2; }
2 计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06，
3 被编译为：
4 
5 p { color: #020406; }

 

IE 滤镜需要每个颜色都包含 alpha 层， 并且得用 #AABBCCDD 这样严格的格式。你可以轻松的利用 {Sass::Script::Functions#ie_hex_str ie_hex_str} 函数对其做转换。 例如：

 1 $translucent-red: rgba(255, 0, 0, 0.5);
 2 $green: #00ff00;
 3 div {
 4   filter: progid:DXImageTransform.Microsoft.gradient(
 5         enabled='false',
 6         startColorstr='#{ie-hex-str($green)}',
 7         endColorstr='#{ie-hex-str($translucent-red)}'
 8     );
 9 }
10 被编译为：
11 
12 div {
13   filter: progid:DXImageTransform.Microsoft.gradient(
14     enabled='false',
15     startColorstr=#FF00FF00,
16     endColorstr=#80FF0000
17     );
18 }

 

4. 最后一个栗子——字符运算

 1 + 运算符可以用来连接字符串：
 2 
 3 p { cursor: e + -resize; }
 4 被编译为：
 5 
 6 p { cursor: e-resize; }
 7 注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如：
 8 
 9 $c: "Hello" + " " + "Sass!";
10 .box:before {
11     content: " #{$c} ";
12 }
13 被编译为：
14 
15 .box:before {
16   content: " Hello Sass! ";
17 }