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