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

• 输出结果

/************选择器**************/
.hello {
  width: 100px;
  height: 100px;
  background: #ff0;
}
textarea,
input {
  background: #eee;
}
.user {
  background: #90ee90;
}
.user:hover {
  background: #32cd32;
}
-webkit-box-shadow arguments #login,
-moz-box-shadow arguments #login,
box-shadow arguments #login,
html.ie8 #login,
html.ie7 #login,
html.ie6 #login,
border 2px solid arguments[length(arguments) - 1] #login,
body #login {
  box-shadow: 1px 1px 3px #eee;
}
body {
  padding: -5px;
}
/************变量**************/
body {
  font: 16px Arial, sans-serif;
}
#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin-left: -75px;
  margin-top: -75px;
}
#logo {
  position: absolute;
  z-index: 1;
}
/************插值**************/
button {
  -webkit-border-radius: 1px 2px;
  -moz-border-radius: 1px 2px;
  border-radius: 1px 2px;
}
table tr:nth-child(1) {
  height: 10px;
}
table tr:nth-child(2) {
  height: 20px;
}
table tr:nth-child(3) {
  height: 30px;
}
table tr:nth-child(4) {
  height: 40px;
}
table tr:nth-child(5) {
  height: 50px;
}