Stylus 運(yùn)算符

運(yùn)算符(Operators)

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

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

[]
! ~ + -
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)先級(jí)較低，因此，下面這個(gè)例子可以替換：

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)算符[]允許我們通過(guò)索引獲取表達(dá)式內(nèi)部值。括號(hào)表達(dá)式可以充當(dāng)元組（如(15px 5px), (1, 2, 3)）。

下面這個(gè)例子使用錯(cuò)誤處理的元組（并展示了該結(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";

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

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

范圍.. ...

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

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

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

加減：+ -

二元加乘運(yùn)算其單位會(huì)轉(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)使用/時(shí)候，你必須用括號(hào)包住。否則/會(huì)根據(jù)其字面意思處理（支持CSS的line-height）。

font: 14px/1.5;

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

font: (14px/1.5);

只有/操作符的時(shí)候需要這樣。

指數(shù)：**

指數(shù)操作符：

2 ** 8
// => 256

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

相等運(yùn)算符可以被用來(lái)等同單位、顏色、字符串甚至標(biāo)識(shí)符。這是個(gè)強(qiáng)大的概念，甚至任意的標(biāo)識(shí)符（例如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.

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

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

true例子：

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

false例子：

0 
null
false
''

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

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

5 && 3
// => 3

0 || 5
// => 5

0 && 5
// => 0

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

存在操作符：in

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

簡(jiǎn)單的例子：

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

5 in nums
// => false

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

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)

對(duì)應(yīng)于：

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

條件賦值：?= :=

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

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

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

如果我們使用等號(hào)=, 就只是簡(jiǎn)單地賦值。

color = white
color = black

color
// => black

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

color = white
color ?= black

color
// => white

實(shí)例檢查：is a

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

15 is a 'unit'
// => true

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

15 is a 'rgba'
// => false

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

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

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

變量定義：is defined

此偽二元運(yùn)算符右邊空蕩蕩，左邊無(wú)計(jì)算。用來(lái)檢查變量是否已經(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)方法做這個(gè)活動(dòng)態(tài)查找。

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

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

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

body
  if ohnoes
    padding 5px

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

body {
  padding: 5px;
}

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

body
  if ohnoes is defined
    padding 5px

三元

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

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

鑄造

作為替代簡(jiǎn)潔的內(nèi)置unit()函數(shù)，語(yǔ)法(expr) unit可用來(lái)強(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)

顏色操作

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

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

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

#888 + 50%
// => #c3c3c3

#888 - 50%
// => #444

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

#f00 + 50deg
// => #ffd500

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

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

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

格式化字符串

格式化字符串模樣的字符串%可以用來(lái)生成字面量值，通過(guò)傳參給內(nèi)置s()方法。

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

多個(gè)值需要括起來(lái)：

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