Stylus的最佳特性

基礎語法

如何讓 CSS 富有表現力的、動態的、健壯的 CSS 是Stylus的追求

原有的CSS代碼，讓咱們Stylus來改造它
body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

花括號太醜！

body 
  font: 12px Helvetica, Arial, sans-serif;

a.button 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

分號有什麼用？

body 
  font: 12px Helvetica, Arial, sans-serif

a.button 
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px

冒號幹掉，好很差？

body 
  font 12px Helvetica, Arial, sans-serif

a.button 
  -webkit-border-radius 5px
  -moz-border-radius 5px
  border-radius 5px

函數也能夠用？

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

body 
  font 12px Helvetica, Arial, sans-serif

a.button 
   border-radius(5px)

變量(Variables)

變量$

在stylus中能夠指定爲變量賦值，這個值能夠是屬性，也能夠是表達式

變量 = 值
變量 = 表達式 + 值
變量之間能夠相互引用

變量名 = 變量值
bgc = green
fz = 10px
或者使用更加明瞭的方式 $
$bgc = green
$fz = 10px

表達式的形式爲變量賦值
$font-size = 14px
$font = $font-size "Lucida Grande", Arial

$size = 10px
$bor = $size solid black 

使用
.box
    font-size   $font 
    border   $bor 
    background-color   $bgc

屬性查找@

Stylus中的這個方法,可讓咱們不用去定義每個變量，直接去調用原生屬性的值

@屬性名
-(@屬性名 / 2) 的方式使用

.box
    positon: absolute
    top 50%
    left 50%
    width 100px
    height 50px
    margin-left -(@width /2)
    margin-top -(@height /2)
    這裏的@width是查找的當前的width屬性的值

且若是當前做用域找不到對應的屬性，那屬性查找會向上的冒泡查找

body
    color red
    ul
        il
            color: blue
            a
                background-color @color

若是找不到上溯的變量那就返回null