css 預編譯處理器 - Stylus

stylus 是三大css預編譯處理器之一！

一、基礎語法

1、語法特性

stylus是一個提倡簡潔寫法的語言，代碼可省略花括號 {}，冒號 ：，引號 ；，當沒有使用花括號，需使用縮進進行編寫，成爲‘python’式書寫。

 

2、變量

變量可以是一個值，也可以是一個表達式。

color = red     // 直接賦值定義變量
border = 1px solid grey     // 賦值一個表達式作爲變量值
h1
    border border    // 引用變量

// 編譯後

h1{
    border: 1px solid grey;
}

爲了更好的區分變量或更高的閱讀性，可在變量前使用$

$color = red

變量還支持屬性查找，無需特定去定義變量。如下

div
    width w = 100px
    height (w/2)

// 編譯後

div{
    width: 100px;
    height: 50px;
}

還有一個更酷的屬性查找，連 w 都不需要定義,改用@直接引用前面的屬性作爲變量使用。

div
    width 100px
    height (@width/2)

// 編譯後

div{
    width: 100px;
    height: 50px;
}

如果嵌套屬性裏面存在多個同名屬性，那麼stylus是 “向上冒泡” 查找屬性的。

h1
  color red
    h2
      color green
      h3
        color @color   // green

• 變量賦多值

list = 12px 13px
list[0] // 12px
list[1] // 13px
list  // 12px 13px

 

3、函數（function）

• 返回值

add(a, b)  // 定義函數，接受 a,b 兩個參數
    a + b  // 返回a,b 相加值

div
    padding: add(5px,5)  // 帶單位傳遞計算時，取最左側運算單位，其他數值去除單位進行運算

// 編譯後

div{
    padding: 10px;
}

函數定義與混合器定義方法一致，而函數可以有返回值。

• 函數體可以定義默認參數

add(a,b=1)  // 若沒有傳遞b參數，則使用默認值1
    a + b

div
    add(10)px

// 編譯後

div{
    padding: 11px;
}

• 命名參數

add(a,b,c)
    a + b + c   // 得到參數結果 a:2  b:1  c:4

div
    padding: add(a:2,c:4, 1)

使用命名傳遞參數可讓我們不必按照順序傳遞參數，沒有命名的則按順序往後排序接受參數

• 內置函數

 add(a, b = a)
   a = unit(a, px)
   b = unit(b, px)
   a + b

 add(15%, 10deg)
 // => 25

內置unit函數可以無視傳的參數，只使用數值無視傳遞的單位進行運算，使用自定義的單位返回

查看更多內置函數可閱讀 stylus內建函數

• 函數返回多個值

list(a, b)
  a b

div
  padding: list(2px,4px)[0]  // 2px

避免歧義可以使用括號或return標識

list(a, b)
  (b a)

list(a, b)
  return b a

• 函數內使用條件判斷返回值

isstring(var)
    if var is a "string"
        yes  // 可以返回你想返回的值
    else
        no

isstring(1) // no
isstring("1") // yes

數值大小判斷

test(a,b)
    if a > b
        1
    else
        2

test(1,2)  // 2

• 函數起別名（類似變量賦值）

alis = test(a,b)  // 錯，不能直接在函數上賦值起別名
    if a > b
        1
    else
        2

alis = test  // 正確起名別方式


test(1,2)  // 2

• 變量函數

stylus和其他開發語言一樣，函數也可以作爲其他函數的參數

• 匿名函數（匿名函數可以用 @(){} 進行定義）

list(a, b, fuc)
  if fuc(a, b)
    1
  else
    2

list(1,2, @(a,b){a>b}) // 2

• arguments參數（arguments參數是每一個函數都有的參數，arguments是一個傳遞的參數數組）

sum()
  n = 0
  for num in arguments
    n += num
sum(1,2,43)

 

4、混合（mixins）

混合器定義方式和函數一致。函數調用結果是返回運算值或指定值。混合器返回的是混合器的整塊代碼塊。

下面是一個典型的混合器應用例子：

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

div
    border-raduis(10px)

// 編譯後

div{
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

混合器也可以想函數一樣使用 arguments參數，直接使用一連串參數值

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

div
  border-radius(10px,20px)

// 編譯後

div{
  -webkit-border-radius: 10px 20px;
  -moz-border-radius: 10px 20px;
  border-radius: 10px 20px;
}

• 父級引用

混合器也和其他預編譯處理器一樣，可以使用 & 作爲父級引用，可以用於僞選擇器的使用

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments
  &:hover
    background-color green

• 混合中使用混合

混合器也可以在體內使用其他混合器

mixin1()
    padding 1px

mixin2()
    mixin1()

 

5、插值（interpolation）

在混合器中插值，可以提供公共部分抽取獨立，簡寫代碼

典型列子，如下

vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  {prop} args

border-radius()
  vendor('border-radius', arguments)

box-shadow()
  vendor('box-shadow', arguments)

• 選擇器插值

table
  for row in 1 2 3 4 5
    tr:nth-child({row})
      height: 10px * row

// 編譯後

table tr:nth-child(1) {
  height: 10px;
}
table tr:nth-child(2) {
  height: 20px;
}
table tr:nth-child(3) {
  height: 30px;
}
table tr:nth-child(4) {
  height: 40px;
}
table tr:nth-child(5) {
  height: 50px;
}

 

6、運算符

• 運算符優先級（優先級從上往下）

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

範圍運算符（...）

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

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

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

• 邏輯運算符(&& || 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

• 條件賦值(?= :=)

color := white   // 直接覆蓋賦值，不管原來有沒有值
color ?= white   // 如果有值則不賦值，沒有值則賦值

• 實例檢查(is a)

15 is a 'unit'
// => true

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

15 is a 'rgba'
// => false

• 變量定義檢查(is defined)

foo is defined
// => false

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

查看更多條件判斷可閱讀 stylus條件判斷章節

 

7、條件控制

• if  elseif  else

a = 2;
if a > 1
    大於1
else if a < 1
    小於1
else
    等於1

• unless 除非條件

"不大於1" unless 1 > 1    // 如果右邊條件成立則不輸出，不成立則輸出

 

8、註釋

• 單行註釋（編譯時不輸出註釋）

// 這是註釋

• 多行註釋（未啓用壓縮模式時會輸出註釋）

/*
* 這是註釋
*/

• 多行緩衝註釋（會無視一切，直接輸出註釋）

/*!
* 這是註釋
*/

 

9、導入

@import "路徑/index.css"
@import "路徑/index"   // 沒有加後綴的文件被認爲是stylus的代碼片段，認爲後綴是styl

 

瞭解更多更詳細的教程可以閱讀 stylus官方文檔

 

 

注：個人學習筆記，非標準答案，不喜勿噴！