Stylus 運(yùn)算符

運(yùn)算符(Operators)

運(yùn)算符優(yōu)先級

下表運(yùn)算符優(yōu)先級，從最高到最低：

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

一元運(yùn)算符

以下一元運(yùn)算符可用，!, not, -, +, 以及~.

!0
// => true

!!0
// => false

!1
// => false

!!5px
// => true

-5px
// => -5px

--5px
// => 5px

not true
// => false

not not true
// => true

邏輯運(yùn)算符not的優(yōu)先級較低，因此，下面這個例子可以替換：

a = 0
b = 1

!a and !b
// => false
// 解析為: (!a) and (!b)

用：

not a or b
// => false
// 解析為: not (a or b)

二元運(yùn)算符

下標(biāo)運(yùn)算符[]允許我們通過索引獲取表達(dá)式內(nèi)部值。括號表達(dá)式可以充當(dāng)元組（如(15px 5px), (1, 2, 3)）。

下面這個例子使用錯誤處理的元組（并展示了該結(jié)構(gòu)的多功能性）：

add(a, b)
  if a is a 'unit' and b is a 'unit'
    a + b
  else
    (error 'a 和 b 必須是 units!')

body
  padding add(1,'5')
  // => padding: error "a 和 b 必須是 units";

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

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

  padding add(1,'5')[1]
  // => padding: "a 和 b 必須是 units";

這兒有個更復(fù)雜的例子?，F(xiàn)在，我們調(diào)用內(nèi)置的error()函數(shù)，當(dāng)標(biāo)識符（第一個值）等于error的時候返回錯誤信息。

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

范圍.. ...

同時提供包含界線操作符(..)和范圍操作符(...)，見下表達(dá)式：

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

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

加減：+ -

二元加乘運(yùn)算其單位會轉(zhuǎn)化，或使用默認(rèn)字面量值。例如，5s - 2px結(jié)果是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"

乘除：/ * %

2000ms + (1s * 2)
// => 4000ms

5s / 2
// => 2.5s

4 % 2
// => 0

當(dāng)在屬性值內(nèi)使用/時候，你必須用括號包住。否則/會根據(jù)其字面意思處理（支持CSS的line-height）。

font: 14px/1.5;

但是，下面這個卻等同于14px ÷ 1.5:

font: (14px/1.5);

只有/操作符的時候需要這樣。

指數(shù)：**

指數(shù)操作符：

2 ** 8
// => 256

相等與關(guān)系運(yùn)算：== != >= <= > <

相等運(yùn)算符可以被用來等同單位、顏色、字符串甚至標(biāo)識符。這是個強(qiáng)大的概念，甚至任意的標(biāo)識符（例如wahoo）可以作為原子般使用。函數(shù)可以返回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等都被認(rèn)作true.

不過，0在算術(shù)上本身是false.

表達(dá)式（或“列表”）長度大于1被認(rèn)為是真。

true例子：

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

false例子：

0 
null
false
''

邏輯操作符：&& || 和 or

邏輯操作符&&和||別名是and / or。它們優(yōu)先級相同。

5 && 3
// => 3

0 || 5
// => 5

0 && 5
// => 0

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

存在操作符：in

檢查左邊內(nèi)容是否在右邊的表達(dá)式中。

簡單的例子：

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

5 in nums
// => false

一些未定義標(biāo)識符：

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)

對應(yīng)于：

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

條件賦值：?= :=

條件賦值操作符?=（別名?:）讓我們無需破壞舊值（如果存在）定義變量。該操作符可以擴(kuò)展成三元內(nèi)is defined的二元操作。

例如，下面這些都是平起平坐的：

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

如果我們使用等號=, 就只是簡單地賦值。

color = white
color = black

color
// => black

但當(dāng)使用?=，第二個相當(dāng)就嗝屁了（因?yàn)樽兞恳呀?jīng)定義了）：

color = white
color ?= black

color
// => white

實(shí)例檢查：is a

Stylus提供一個二元運(yùn)算符叫做is a, 用做類型檢查。

15 is a 'unit'
// => true

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

15 is a 'rgba'
// => false

另外，我們可以使用type()這個內(nèi)置函數(shù)。

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

注意：color是唯一的特殊情況，當(dāng)左邊是RGBA或者HSLA節(jié)點(diǎn)時，都為true.

變量定義：is defined

此偽二元運(yùn)算符右邊空蕩蕩，左邊無計算。用來檢查變量是否已經(jīng)分配了值。

foo is defined
// => false

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

#fff is defined
// => 'invalid "is defined" check on non-variable #fff'

另外，我們可以使用內(nèi)置lookup(name)方法做這個活動態(tài)查找。

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

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

該操作符必不可少，因?yàn)橐粋€未定義的標(biāo)識符仍是真值。如：

body
  if ohnoes
    padding 5px

當(dāng)未定義的時候，產(chǎn)生的是下面的CSS：

body {
  padding: 5px;
}

顯然，這不是我們想要的，如下書寫就安全了：

body
  if ohnoes is defined
    padding 5px

三元

三元運(yùn)算符的運(yùn)作正如大部分語言里面的那樣。三個操作對象的操作符（條件表達(dá)式、真表達(dá)式以及假表達(dá)式）。

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

鑄造

作為替代簡潔的內(nèi)置unit()函數(shù)，語法(expr) unit可用來強(qiáng)制后綴。

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)

顏色操作

顏色操作提供了一個簡潔，富有表現(xiàn)力的方式來改變其組成。例如，我們可以對每個RGB：

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

另外一個例子是通過增加或減少百分值調(diào)整顏色亮度。顏色亮，加；暗，則減。

#888 + 50%
// => #c3c3c3

#888 - 50%
// => #444

我們也可以通過增加或減去色度調(diào)整色調(diào)。例如，紅色增加65deg就變成了黃色。

#f00 + 50deg
// => #ffd500

值適當(dāng)固定。例如，我們可以"旋轉(zhuǎn)"180度的色調(diào)，如果目前的值是320deg, 將變成140deg.

我們也可能一次調(diào)整幾個值（包括alpha），通過使用rgb(), rgba(), hsl(), 或 hsla():

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

格式化字符串

格式化字符串模樣的字符串%可以用來生成字面量值，通過傳參給內(nèi)置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%)