1. 犀牛前端部落首页
  2. Sass教程
  3. Sass基础

Sass 操作符

上篇文章,我们探讨了关于SassScript数据类型的理解。这篇文章我们将一起学习Sass操作符。

Equality Operations

SassScript支持所有数据类型的一个操作:相等。 您可以使用==和!=运算符比较任意两个值,它们返回一个布尔值:

2 == 3 //false
2 != 3 //true

上面的示例使用的是数值,你可以比较任何数据类型:

$a: bold;
$b: italic;
$a == $b /* false */
$a != $b /* true */

在执行布尔运算时,SassScript遵循数据类型,如下例所示:

2 == "2" /* false */
"true" == true /* false /

此操作返回false,因为第一个操作数是数字,第二个操作数是字符串。 您不会在Sass代码中经常使用相等运算符,在控制指令中,你将会大量使用。

Boolean operations

与相等操作一样,布尔运算符返回布尔值(true或false)。 Sass支持三个布尔运算符:and,or 和 not。

and运算符仅当两个操作数都为真时,返回true:

true and true //returns true
true and false //returns false

or运算符只有有一个操作数为真时,返回true:

true or false //returns true
true or true //returns true
false or false //returns false

not运算符用来取反,它只是将值反转:

not true  //false
not false //true

Numeric Operations

SassScript允许你对数值进行算术和比较操作。

Basic Arithmetic

SassScript支持数值的所有标准算术运算:

1 + 1   //2 (加)
1 - 1   //0 (减)
2 * 3   //6 (乘)
(6 / 3) //2 (乘)
5 % 2   //5 (取余)
-3      //负数

请注意,我在运算符周围包含空格,但这不是必需的,因此1+1与1 + 1相同。

不幸的是,Sass与CSS语法兼容的要求在几个方面使代数运算符复杂化。 第一个是除法运算符。 虽然这不常见,但CSS允许使用字符来分隔数字,因此Sass必须尊重这一点。 如果我在没有括号的情况下编写,则转换器会将其输出为字符串而不是评估表达式。

解决方案是简单地用括号括起部分表达式或整个表达式:

(6)/ 3
(6/3)

如果你只写了空格,你将会得到一个负值列表。

5 -2 //含有两项值的列表

Comparison

除了对所有数据类型有效的相等性比较外,SassScript还支持比较两个值。 与==和!=运算符一样,所有这些都返回一个布尔值:

5 < 3  //false (小于)
5 > 3  //true (大于)
3 <= 3 //true (小于等于)
5 >= 3 //true (大于等于)

在这种情况下,Sass运算与CSS语法不冲突。

String Operations

Sass只支持字符串上的单个运算符,连接,但它支持多种类型的操作符。 最简单的是连接运算符:

"hello, " + "world"  // returns "hello, world"

Sass转换器将根据第一个操作数确定是否引用字符串:

p {
   content: "Hello " + world;
   font-family: sans + "-serif";
}

上面的代码将会输出:

p {
   content: "Hello world";
   font-family: sans-serif;
}

您可以通过将它们包装在插值运算符#{}中来在字符串中使用表达式。

#plain-text {
   content: "I'm 1 + 2 years old";
}

#interpolated {
   content: "I'm #{1 + 3} years old";
}

上面的代码将会转换为:

#plain-text {
   content: "I'm 1 + 2 years old";
}

#interpolated {
   content: "I'm 4 years old";
}

Color Operations

SassScript允许您在两种颜色之间或颜色和数值之间执行算术运算。虽然很少需要使用RGB颜色操作,但是了解作为一个常识还是有必要的。

对两个颜色值执行算术运算时,Sass将每种颜色分为红色,绿色和蓝色分量,然后分别对每种颜色执行。

#102030 + #010203

Sass将首先将这两种颜色分解为红色,绿色和蓝色成分:(10,20,30)和(01,02,03)。 然后它将对每种颜色执行操作(在这种情况下,添加):10 + 1表示红色,20 + 2表示绿色,30 + 3表示蓝色。 然后它将重新组合这些值,因此上面的表达式最终结果为#112233。

当您对颜色和数字执行操作时,Sass的功能基本相同:操作分别对每个颜色组件执行。 因此,给定表达式#101010 * 2,结果将是#202020。

这里的示例使用十六进制格式的颜色,但您也可以使用rgb,rgba,hsl和hsla。 有一点需要注意:如果您使用的颜色格式包含alpha值(rgba或hsla),则alpha值必须相同,并且它们不会包含在计算中:

rgba(55, 160, 0, .5) + rgba(10, 0, 0, .5); //rgba(65, 160, 0, 0.5)
rgba(55, 160, 0, .5) + rgba(10, 0, 0, 1);  //syntax error

 

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2301.html

发表评论

登录后才能评论