SASS – 操作符

本文介绍Sass操作符(或运算符)。包括加法、减法、除法、等号操作符等。

等号操作符

所有数据类型都支持等号运算符:

== 等于
!= 不等于

除了等号运算符之外,每种数据类型还支持各自的一组操作符。

数字操作符

SassScript支持以下标准的算术操作符:

+
-
*
/
% 取模

算术运算符的一个常见用法是宽度计算。

例如,下面的例子计算宽度百分比:

.container { 
    width: 100%; 
}

article {
    float: left;
    width: 700px / 960px * 100%;
}

.sidebar {
    float: right;
    width: 200px / 960px * 100%;
}

经过编译输出以下CSS代码:

.container {
  width: 100%; }

article {
  float: left;
  width: 72.91667%; }

.sidebar {
  float: right;
  width: 20.83333%; }

使用算术操作符时,参与运算的数据单位必须相同。否则会报错(例如,一个用px,另一个用em):

 .box-big {
        font-size:  22px + 4em; // Error: Incompatible units: 'em' and 'px'.
        width: 30% - 20px; // Error: Incompatible units: 'px' and '%'.
    }

颜色操作符

算术操作符也适用于颜色。计算颜色时,参与运算的是R, G, B分量,而不是整个六位数颜色值。

例如,当把两个十六进制颜色值相加时,将依次把每一对分量值相加。

示例:

body {
    color: #991100 + #002299;
}

经过编译输出以下CSS代码:

body {
  color: #993399; }

还可以对颜色和数字应用运算符。例如

body {
    color: #112233 * 2;
}

经过编译输出以下CSS代码:

body {
  color: #224466; }

字符串操作符

+操作符还可以用来连接字符串。

img {
  cursor: zoom + -in;
}

经过编译输出以下CSS代码:

img {
  cursor: zoom-in; }

逻辑运算符

Sass还支持对布尔值使用and、or和not等运算符。



浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载