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