CSS Stylus（一）

CMD命令 stylus -w hello.styl -o hello.css

语法

• 选择器

// 缩排
.hello
    width 100px
    height 100px
    background yellow

//规则集
textarea, input
    background #eeeeee

//父级引用
.user
    background lightgreen
    &:hover
        background limegreen


box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
html.ie8 &,
html.ie7 &,
html.ie6 &,
  border 2px solid arguments[length(arguments) - 1]

body
    #login
        box-shadow 1px 1px 3px #eee

//消除歧义
pad(n)
    padding (- n)

body
    pad(5px)

• 变量

//变量
$font-size = 16px
$font = $font-size Arial, sans-serif
body
    font $font

//属性查找(会逐级冒泡查找)
#logo
    position absolute
    top 50%
    left 50%
    width 150px
    height 150px
    margin-left -(@width/2)
    margin-top -(@height/2)

//属性查找（动态定义）
position()
    position arguments
    z-index 1 unless @z-index

#logo
    position absolute

• 插值

prefix(name, args)
    -webkit-{name} args
    -moz-{name} args
    {name} args

border-radius()
    prefix('border-radius', arguments)

button
    border-radius 1px 2px

table
    for row in 1 2 3 4 5
        tr:nth-child({row})
            height 10px * row