跳到主要内容

运算符

运算符优先级​

下面是运算符优先级表，从高到低：

.
[]
! ~ + -
is defined
** * / %
+ -
... ..
<= >= < >
in
== is != is not isnt
is a
&& and || or
?:
= := ?= += -= *= /= %=
not
if unless

一元运算符​

以下一元运算符可用：!、not、-、+ 和 ~。

!0
// => true

!!0
// => false

!1
// => false

!!5px
// => true

-5px
// => -5px

--5px
// => 5px

not true
// => false

not not true
// => true

逻辑 not 运算符的优先级较低，因此以下示例可以替换为

a = 0
b = 1

!a and !b
// => false
// 解析为：(!a) and (!b)

使用：

not a or b
// => false
// 解析为：not (a or b)

二元运算符​

下标 []​

下标运算符允许我们通过索引（从零开始）在表达式中获取值。负索引值从表达式的最后一个元素开始。

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

list[-1]
// => 3

带括号的表达式可以充当元组（例如 (15px 5px)、(1 2 3)）。

以下是使用元组进行错误处理的示例（并展示了此结构的多功能性）：

add(a, b)
  if a is a 'unit' and b is a 'unit'
    a + b
  else
    (error 'a and b must be units!')

body
  padding add(1,'5')
  // => padding: error "a and b must be units";

  padding add(1,'5')[0]
  // => padding: error;

  padding add(1,'5')[0] == error
  // => padding: true;

  padding add(1,'5')[1]
  // => padding: "a and b must be units";

这是一个更复杂的示例。现在，每当标识符（第一个值）等于 error 时，我们都会调用内置的 error() 函数并返回错误消息。

if (val = add(1,'5'))[0] == error
  error(val[1])

范围 .. ...​

提供了包括（..）和排除（...）范围运算符，扩展为表达式：

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

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

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

加法：+ -​

乘法和加法二元运算符按预期工作。在单位类型类中应用类型转换，或默认为字面值。例如，5s - 2px 的结果为 3s。

15px - 5px
// => 10px

5 - 2
// => 3

5in - 50mm
// => 3.031in

5s - 1000ms
// => 4s

20mm + 4in
// => 121.6mm

"foo " + "bar"
// => "foo bar"

"num " + 15
// => "num 15"

乘法：/ * %​

2000m```

```stylus
s + (1s * 2)
// => 4000毫秒

5s / 2
// => 2.5秒

4 % 2
// => 0

在属性值中使用 / 时，必须用括号括起来。否则 / 将被视为字面值（以支持 CSS 的 line-height）：

font: 14px/1.5;

但以下代码将被计算为 14px ÷ 1.5：

font: (14px/1.5);

这仅适用于 / 运算符。

简写运算符：+= -= *= /= %=​

简写运算符与其他常见语言类似。对于列表变量，第一个值将用于执行运算符并覆盖列表以将其转换为单值变量。对于字符串，只有 += 作为追加函数。对于数字类型的值，所有运算符都像普通数学一样工作。颜色值也类似。

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

int-list = 12 23 0 32
int-list %= 2
// => 12 % 2 = 0（模运算符）
// => int-list = 0

mixed-list = node 23 'str'
mixed-list %= 2
// => 错误

mixed-list = node 23 'str' #2e7
mixed-list += 2
// => mixed-list = node2

s = 'str'
s += 2
// => s = 'str2'

c = #0e0
c -= #0e0
// => c = #000

指数：**​

指数运算符：

2 ** 8
// => 256

相等和关系：== != >= <= > <​

相等运算符可用于等同单位、颜色、字符串，甚至标识符。这是一个强大的概念，因为即使是任意标识符（例如 wahoo）也可以用作原子。函数可以返回 yes 或 no 而不是 true 或 false（虽然不建议这样做）。

5 == 5
// => true

10 > 5
// => true

#fff == #fff
// => true

true == false
// => false

wahoo == yay
// => false

wahoo == wahoo
// => true

"test" == "test"
// => true

true is true
// => true

'hey' is not 'bye'
// => true

'hey' isnt 'bye'
// => true

(foo bar) == (foo bar)
// => true

(1 2 3) == (1 2 3)
// => true

(1 2 3) == (1 1 3)
// => false

只有精确值匹配。例如，0 == false 和 null == false 都是 false。

别名：

==    is
!=    is not
!=    isnt

真实性​

几乎所有 Stylus 中的内容都解析为 true，包括带有后缀的单位。即使 0%、0px 等也将解析为 true（因为在 Stylus 中，混合或函数接受单位作为有效值很常见）。

但是，从算术角度来看，0 本身是 false。

长度大于 1 的表达式（或“列表”）被视为真实。

true 示例：

0%
0px
1px
-1
-1px
hey
'hey'
(0 0 0)
('' '')

false 示例：

0
null
false
''

逻辑运算符：&& || 和 and or​

逻辑运算符 && 和 || 别名为 and / or，它们具有相同的优先级。

5 && 3
// => 3

0 || 5
// => 5

0 && 5
// => 0

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

存在运算符：in​

检查左操作数是否存在于右表达式中。

简单示例：

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

5 in nums
// => false

一些未定义的标识符：

words = foo bar baz
bar in words
// => true

HEY in words
// => false

也适用于元组：

vals = (error 'one') (error 'two')
error in vals
// => false

(error 'one') in vals
// => true

(error 'two') in vals
// => true

(error 'something') in vals
// => false

混合使用示例：

pad(types = padding, n = 5px)
  if padding in types
    padding n
  if margin in types
    margin n

body
  pad()

body
  pad(margin)

body
  pad(padding margin, 10px)

生成的 CSS：

body {
  padding: 5px;
}
body {
  margin: 5px;
}
body {
  padding: 10px;
  margin: 10px;
}

条件赋值：?= :=​

条件赋值运算符 ?=（别名为 :=）允许我们定义变量而不会覆盖旧值（如果存在）。该运算符在三元运算符中扩展为一个 is defined 二元运算。

例如，以下是等价的：

color := white
color ?= white
color = color is defined ? color : white

当使用普通的 = 时，我们只是重新赋值：

color = white
color = black

color
// => black

但是当使用 ?= 时，我们的第二次尝试失败了（因为变量已经定义）：

color = white
color ?= black

color
// => white

实例检查：is a​

Stylus 提供了一个名为 is a 的二元运算符，用于类型检查。

15 is a 'unit'
// => true

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

15 is a 'rgba'
// => false

或者，我们可以使用 type() BIF：

type(#fff) == 'rgba'
// => true

注意： color 是唯一的特例，当左操作数是 RGBA 或 HSLA 节点时，它的值为 true。

变量定义：is defined​

这个伪二元运算符不接受右操作数，并且不评估左操作数。这使我们可以检查变量是否有值分配给它。

foo is defined
// => false

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

#fff is defined
// => 'invalid "is def

在非变量 #fff 上执行“ined”检查

或者，可以使用内置函数 lookup(name) 来执行此操作或执行动态查找：

name = 'blue'
lookup('light-' + name)
// => null

light-blue = #80e2e9
lookup('light-' + name)
// => #80e2e9

该运算符是必不可少的，因为未定义的标识符仍然是真值。例如：

body
  if ohnoes
    padding 5px

当未定义时将产生以下 CSS：

body {
  padding: 5px;
}

但是这将是安全的：

body
  if ohnoes is defined
    padding 5px

三元运算符​

三元运算符在大多数语言中的工作方式与我们预期的相同。它是唯一具有三个操作数（条件表达式、真表达式和假表达式）的运算符。

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

强制类型转换​

作为 unit() 内置函数的简洁替代方案，可以使用 (expr) unit 语法来强制后缀。

body
  n = 5
  foo: (n)em
  foo: (n)%
  foo: (n + 5)%
  foo: (n * 5)px
  foo: unit(n + 5, '%')
  foo: unit(5 + 180 / 2, deg)

颜色操作​

对颜色的操作提供了一种简洁、表达力强的方式来改变组件。例如，我们可以对每个 RGB 进行操作：

#0e0 + #0e0
// => #0f0

另一个例子是通过添加或减去百分比来调整亮度值。要使颜色变亮，请添加；要使颜色变暗，请减去。

#888 + 50%
// => #c3c3c3

#888 - 50%
// => #444

通过添加或减去度数也可以调整色调。例如，将 50deg 添加到此红色值会导致黄色：

#f00 + 50deg
// => #ffd500

值会适当地夹紧。例如，我们可以“旋转”色调 180 度，如果当前值为 320deg，它将解析为 140deg。

我们还可以使用 rgb()、rgba()、hsl() 或 hsla() 来同时调整多个值（包括 alpha）：

#f00 - rgba(100,0,0,0.5)
// => rgba(155,0,0,0.5)

Sprintf​

字符串 sprintf 类似的运算符 % 可以用于生成文字值，通过 s() 内置传递参数：

'X::Microsoft::Crap(%s)' % #fc0
// => X::Microsoft::Crap(#fc0)

多个值应该用括号括起来：

'-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
// => -webkit-gradient(linear, 0 0, 0 100%)