Stylus-富有表現力的、動態的、健壯的CSS

今天總結一下Stylus記一些經常使用的也是最基本的用法

一.  選擇器

Stylus是基於縮進的這讓咱們能夠更快捷的編寫css好比

body {
    margin: 0;
    paddind: 0;
    font-size: 12px;
    background: red;
}

使用stylus基於縮進的寫法：
body
    margin 0;
    padding 0;
    font-szie 12px;
    background red

 規則級

咱們經常將重複的代碼寫在一塊兒這樣能讓咱們少些不少代碼,

.header, .main {
    margin: 5px;
    border: 1px solid orange
}

Stylus就跟css同樣使用,分隔同時爲多個元素定義屬性

.header,  .main
     margin 5px;
     border 1px solid orange

 父級引用

字符&指向父選擇器

a 
  color red
  &:hover 
       color  orange

就至關於

a {
    color: red
}

a:hover {
    color: orange
}

 

 

二：變量

變量(Variables)

變量

咱們能夠指定表達式爲變量，而後在咱們的樣式中貫穿使用：

font-size = 14px

header 
      font-size font-size

 

三.插值(Interpolation)

插值

Stylus支持經過使用{}字符包圍表達式來插入值，其會變成標識符的一部分。例如，-webkit-{'border' + '-radius'}等同於-webkit-border-radius.

partOfProp = radius
value = 10px
div
    border-{partOfProp} value  /*切記屬性值這裏不可使用插值*/

四：運算符

comWidth = 980px

.innerWidth
        width: comWidth - 20px;

五：混合書寫

混入

混入和函數定義方法一致，可是應用卻截然不同。

例如，下面有定義的border-radius(n)方法，其卻做爲一個mixin（如，做爲狀態調用，而非表達式）調用。

當border-radius()選擇器中調用時候，屬性會被擴展並複製在選擇器中。

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

.innerWidth
   width 200px
   height 200px
   border 1px solid red
   border-radius(50%)
   

六：方法(Functions)

函數

Stylus強大之處就在於其內置的語言函數定義。其定義與混入(mixins)一致；卻能夠返回值。

返回值

add(a, b)
  a + b

.innerWidth
  width add(50px, 5)
  height add(20px, 5)
  border 1px solid red

默認參數

可選參數每每有個默認的給定表達。在Stylus中，咱們甚至能夠超越默認參數。

 

add(a, b = a)
  a + b

.innerWidth
  width add(50px, 5)
  height add(20px)
  border 1px solid red

當沒有指定第二個參數就會使用默認參數b=a 也就是加上20

 

咱們能夠把簡單的add()方法更進一步。經過內置unit()把單位都變成px, 由於賦值在每一個參數上，所以，咱們能夠無視單位換算。

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

.innerWidth 
    width add(15%, 10deg)
    height 200px;
    border 1px solid red