Stylus文档

Stylus是一种革命性的新语言,它提供了一种高效,动态和表达方式来生成CSS。同时支持缩进语法和常规CSS样式。

安装

npm install stylus -g

基本用法

使用以下命令从命令行观看并编译Stylus文件

stylus -w style.styl -o style.css

示例

border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments

body a
font: 12px/1.4 "Lucida Grande", Arial, sans-serif
background: black
color: #ccc

form input
padding: 5px
border: 1px solid
border-radius: 5px

编译为:

body a {
font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
background: #000;
color: #ccc;
}
form input {
padding: 5px;
border: 1px solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

以下等效于使用CSS语法的Stylus源代码的缩进版本:

border-radius() {
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments
}

body a {
font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
background: black;
color: #ccc;
}

form input {
padding: 5px;
border: 1px solid;
border-radius: 5px;
}