Stylus预处理器中的运算符详解

Stylus预处理器中的运算符详解

stylus Expressive, robust, feature-rich CSS language built for nodejs 项目地址: https://gitcode.com/gh_mirrors/st/stylus

前言

Stylus作为一款强大的CSS预处理器，提供了丰富的运算符功能，让开发者能够以更简洁、灵活的方式编写样式代码。本文将全面解析Stylus中的各类运算符，帮助开发者掌握其使用技巧。

运算符优先级

理解运算符优先级是正确使用Stylus的基础。以下是Stylus中运算符的优先级表（从高到低）：

1. 成员访问符 . 和下标 []
2. 一元运算符 ! ~ + -
3. 存在性检查 is defined
4. 指数运算符 **
5. 乘除取模 * / %
6. 加减 + -
7. 范围运算符 ... ..
8. 比较运算符 <= >= < >
9. 包含运算符 in
10. 相等性判断 == is != is not isnt
11. 类型检查 is a
12. 逻辑与 && and
13. 逻辑或 || or
14. 三元运算符 ?:
15. 赋值运算符 = := ?= += -= *= /= %=
16. 逻辑非 not
17. 条件语句 if unless

一元运算符

Stylus支持多种一元运算符：

• 逻辑非：! 和 not
• 算术正负：+ 和 -
• 按位取反：~

!0        // => true
!!0       // => false
-5px      // => -5px
not true  // => false

注意not运算符的优先级较低，表达式not a or b会被解析为not (a or b)，而不是(not a) or b。

二元运算符

下标访问 []

下标运算符可以从列表或元组中获取特定位置的元素（从0开始计数），负数表示从末尾开始：

list = 1 2 3
list[0]   // => 1
list[-1]  // => 3

范围运算符 .. 和 ...

• ..：包含结束值
• ...：不包含结束值

1..5    // => 1 2 3 4 5
1...5   // => 1 2 3 4
5..1    // => 5 4 3 2 1

算术运算符

Stylus支持标准的算术运算，并会自动处理单位转换：

15px - 5px      // => 10px
5in - 50mm      // => 3.031in
"foo " + "bar"  // => "foo bar"

注意除法运算符/在属性值中必须用括号包裹，否则会被当作CSS原生的/处理：

font: (14px/1.5);  // 计算除法
font: 14px/1.5;    // 原样输出

复合赋值运算符

Stylus支持+=、-=等复合赋值运算符：

n = 12
n += 8  // => n = 20

指数运算符 **

2 ** 8  // => 256

比较运算符

Stylus支持多种比较运算符，可以比较数字、颜色、字符串等：

5 == 5          // => true
#fff == #fff    // => true
'hey' isnt 'bye' // => true

注意0 == false和null == false都返回false，Stylus采用严格相等比较。

逻辑运算符

逻辑运算符&&和||有对应的别名and和or：

5 && 3  // => 3
0 || 5  // => 5

存在性检查 in

检查左操作数是否存在于右操作数中：

nums = 1 2 3
1 in nums  // => true

条件赋值 ?= 和 :=

这两个运算符只在变量未定义时进行赋值：

color = white
color ?= black  // color仍为white

类型检查 is a

检查值的类型：

15 is a 'unit'  // => true
#fff is a 'rgba' // => true

变量定义检查 is defined

检查变量是否已定义：

foo is defined  // => false
foo = 15px
foo is defined  // => true

三元运算符

num = 15
num ? unit(num, 'px') : 20px  // => 15px

类型转换

可以使用(expr) unit语法进行类型转换：

n = 5
(n)em      // => 5em
(n + 5)%   // => 10%

颜色运算

Stylus支持直接对颜色值进行运算：

#0e0 + #0e0    // => #0f0
#888 + 50%     // => #c3c3c3 (变亮)
#f00 + 50deg   // => #ffd500 (色相调整)

字符串格式化 %

类似于sprintf的字符串格式化：

'color: %s' % #fc0  // => 'color: #fc0'

结语

掌握Stylus的运算符系统可以大幅提升样式开发效率和代码表现力。通过本文的详细解析，希望开发者能够充分利用Stylus强大的运算能力，编写出更简洁、更灵活的样式代码。

stylus Expressive, robust, feature-rich CSS language built for nodejs 项目地址: https://gitcode.com/gh_mirrors/st/stylus