stylus的用法

參考連接：預處器的對比——Sass、LESS和Stylus   http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocessor-shootout.html

由於在vue.js項目（高仿餓了麼app）中會用到stylus，因此本文重點關注stylus的用法

1.語法

Stylus的語法花樣多一些，它使用「.styl」的擴展名，Stylus也接受標準的CSS語法，可是他也接受不帶花括號和分號的語法，以下所示：

/* style.styl */
h1 {
  color: #0982C1;
}
/* 省略花括號 */
h1
  color: #0982C1;
/* 省略花括號和分號 */
h1
  color #0982C1

2.變量

你能夠在CSS預處理器中聲明變量,並在整個樣式表中使用。CSS預處理器支持任何變量（例如：顏色、數值（無論是否包括單位）、文本）。而後你能夠在任意地方引用變量。

Stylus聲明變量沒有任何限定,你能夠使用"$"符號開始。結尾的分號(;)無關緊要,但變量名和變量值之間的等號(=)是須要的。有一點須要注意的是,若是咱們使用"@"符號開頭來聲明（0.22.4）變量，Stylus會進行編譯，但其對應的值並不會賦值給變量。換句話說，在Stylus中不要使用「@」符號開頭聲明變量。

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

上面的代碼都將轉譯成相同的CSS。你能夠想像一下,變量的做用有多大。咱們不須要爲了修改一個顏色而輸入許屢次,也不須要爲了修改一個寬度去到找尋找他.(咱們只須要修改定義好的變量,修改一次就足夠).下面是轉譯過來的CSS代碼:

 body {
  color: #0982c1;
  border: 1px dotted #0982c1;
  max-width: 1024px;
} 

3.嵌套

若是咱們在CSS中多個元素有一個相同的父元素，那麼寫樣式會變得很乏味，咱們須要一遍一遍的在每一個元素前寫這個父元素.

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
} 

相反，使用CSS預處理器，咱們能夠在父元素的花括號({})寫這些元素。同時可使用「&」符號來引用父選擇器。

section {
  margin: 10px;
  nav {
    height: 25px;
    a {
      color: #0982C1;
      &:hover {
        text-decoration: underline;
      }
    }
  }
} 

4.混合

Mixins是預處器中的函數。平時你在寫樣式時確定有碰到過，某段CSS樣式常常要用到多個元素中，這樣你就須要重複的寫屢次。在CSS預處器中，你能夠爲這些公用的CSS樣式定義一個Mixin，而後在你CSS須要使用這些樣式的地方，直接調用你定義好的Mixin。這是一個很是有用的特性。Mixins是一個公認的選擇器，還能夠在Mixins中定義變量或者是默認參數。

能夠不使用任何符號，就是直接定義Mixins名，而後在定義參數和默認值之間用等號（=）來鏈接。

 /* Stylus 定義了一個名叫error的mixin，這個error設置了一個參數「$borderWidth」,在沒特別定義外，這個參數的值是默認值2px */
error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* 調用error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* 調用error mixins，並將參數$borderWidth的值指定爲5px */
} 

轉譯後：

.generic-error {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  border: 5px solid #f00;
  color: #f00;
}

5.繼承

在多個元素應用相同的樣式時，咱們在CSS一般都是這樣寫：

p,
ul,
ol {
  /* 樣式寫在這 */
} 

這樣作很是的好，但每每咱們須要給單獨元素添加另外的樣式，這個時候咱們就須要把其中選擇器單獨出來寫樣式，這樣一回來咱們維護樣式就至關的麻煩。爲了應對這個問題，CSS預處理器能夠從一個選擇繼承另外一個選擇器下的全部樣式。

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block; /* 繼承.block全部樣式 */
  border: 1px solid #EEE;
}
ul, ol {
  @extend .block; /* 繼承.block全部樣式 */
  color: #333;
  text-transform: uppercase;
}  

轉譯後：

.block, p, ul, ol {
  margin: 10px 5px;
  padding: 2px;
}
p {
  border: 1px solid #EEE;
}
ul, ol {
  color: #333;
  text-transform: uppercase;
}  

6.導入

在CSS中，並不喜歡用@import來導入樣式，由於這樣的作法會增長HTTP的請求。可是在CSS預處理器中的導入（@import）規則和CSS的有所不一樣，它只是在語義上導入不一樣的文件，但最終結果是生成一個CSS文件。若是你是經過「@import 'file.css'」導入「file.css」樣式文件，那效果跟普通CSS導入樣式文件同樣。注意：導入文件中定義了變量、混合等信息也將會被引入到主樣式文件中，所以須要避免他們的相互衝突。

/* file.{type} */
body {
  background: #EEE;
}

@import "reset.css";
@import "file.{type}";
p {
  background: #0982C1;
} 

轉譯後

@import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}  

7.顏色函數

顏色函數是CSS預處裏器中內置的顏色函數功能，這些功能能夠對顏色值進行處理，例如顏色的變亮、變暗、漸變顏色等處理十分的方便。

lighten(color, 10%); /* 返回的顏色在'color'基礎上變亮10% */
darken(color, 10%);  /* 返回的顏色在'color'基礎上變暗10% */
saturate(color, 10%);   /* 返回的顏色在'color'基礎上飽和度增長10% */
desaturate(color, 10%); /* 返回的顏色在'color'基礎上飽和度下降10% */  

下面是Stylus顏色函數的一個簡單實例

color = #0982C1
h1
  background color
  border 3px solid darken(color, 50%)  

8.運算符

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 100px - 50px;
  left: 10 * 10;
} 

實際運用

屬性前綴

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

轉譯後

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

瀏覽器前綴的問題，主要是針對於CSS3屬性的運用，衆所周知，CSS3的屬性有並非全部瀏覽器都支持屬性的標準語法，所以在實際運用中時，不得不加上各瀏覽器的前綴來識別。