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;
}