stylus快速入门

Stylus安装

通过npm全局安装

1
$ npm install stylus -g

Stylus使用

stylus可以省略花括号和分号

1
2
3
4
5
6
7
8
9
10
/* style.styl */
h1 {
color: #0982C1;
}
/* 省略花括号 */
h1
color: #0982C1;
/* 省略花括号和分号 */
h1
color #0982C1

stylus也能嵌套

1
2
3
4
5
6
7
8
9
10
11
12
section {
margin: 10px;
nav {
height: 25px;
a {
color: #0982C1;
&:hover {
text-decoration: underline;
}
}
}
}

编译后

1
2
3
4
5
6
7
8
9
10
11
12
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}

使用变量

1
2
3
4
font-size = 14px
body
font font-size Arial, sans-seri

编译后

1
2
3
body {
font: 14px Arial, sans-seri;
}