stylus 在静态页面上的使用经验
前段时间做vue项目，用到了css的提升开发效率的工具stylus，感觉很好用。现在又开始写静态页面了，于是将强大的stylus拿过来继续用。于是就写了这篇使用经验，算是自己总结一下。
stylus的安装
使用前，我们需要在终端里面进行全局安装stylus，这样在项目中可以使用stylus将styl文件解析成css（当然也可以将css反编译成styl文件）。
$ npm install stylus -g
可以使用命令查看是否安装成功了（大写）
$ stylus -V
安装完成之后你可以看到下面一些常用的参数
Usage: stylus [options] [command] [< in [> out]]
[file|dir ...]
Commands:
help <prop> Opens help info for <prop> in
your default browser. (OS X only)
Options:
-u, --use <path> Utilize the stylus plugin at <path>
-i, --interactive Start interactive REPL
-w, --watch Watch file(s) for changes and re-compile
-o, --out <dir> Output to <dir> when passing files
-C, --css <src> [dest] Convert CSS input to Stylus
-I, --include <path> Add <path> to lookup paths
-c, --compress Compress CSS output
-d, --compare Display input along with output
-f, --firebug Emits debug infos in the generated css that
can be used by the FireStylus Firebug plugin
-l, --line-numbers Emits comments in the generated CSS
indicating the corresponding Stylus line
-V, --version Display the version of Stylus
-h, --help Display help information
-w、-o、-c是我们会常用到的
-w ：监听文件，只要原文件改变，解析后的目标文件也会同时改变 -o ：指定目标文件，不指定的话就是和源文件同名 -c ：压缩文件，将源文件解析后并压缩
stylus的命令行操作
安装完成后，我们进入项目的根目录（最好是style这级目录），假如我们有一个style目录，里面有一个example.styl文件（stylus文件的后缀名就是styl），对文件进行解析。
// 将style目录下面的styl文件都解析为相同文件名都css文件，并放在style目录里面 // 并且监听文件 $ stylus -w style/ // 将style目录下面的styl文件都解析为相同文件名都css文件，并放在style目录里面 // 并对css文件进行压缩 // 并且监听文件 $ stylus -w -c style/ // 将style目录下面的styl文件都解析为指定的文件名css，与style同级目录 // 并且监听文件 $ stylus -w style/ -o main.css
stylus的基本使用语法
所有的前期准备工作完成，现在开始对stylus进行基本使用，看看效果
stylus文件
stylus文件
body
ul
color: red
font-size: 20px
li
color: yellow
font-size: 36px
css文件
body ul {
color: #f00;
font-size: 20px;
}
body ul li {
color: #ff0;
font-size: 36px;
}
就是这么简单，这么方便。这样就可以节省很多写选择器的时间了，这样也不容易出错了。
知道什么是stylus文件格式后，我们来看看一些在平时开发中常用到的一些技巧型的东西
&符号
&符号，表示同级元素，即和&同一列样式的所有者
// style文件
ul
li
color: red
&:first-child
font-size: 20px
// css文件
ul li {
color: #f00;
}
ul li:first-child {
font-size: 20px;
}
@符号
@name，表示继承前面父级或自己已经定义过样式的name的样式
// stylus文件
.list
background: red
.part
background: @background
// css文件
.list {
background: #f00;
}
.list .part {
background: #f00;
}
Variables(变量)
除了可以使用@来使用定义好的样式外，我们还可以给变量赋值样式，让好在后面调用
//stylus文件
font-size = 14px
body
font font-size Arial, sans-seri
// css文件
body {
font: 14px Arial, sans-seri;
}
可以将变量放在属性中
// stylus文件
#prompt
width: w = 200px
margin-left: -(w / 2)
// css文件
#prompt {
width: 200px;
margin-left: -100px;
}
有条件的使用属性
// stylus:指定z-index值为1，但是，只有在z-index之前未指定的时候才这样：
// stylus文件
position()
position: arguments
z-index: 1 unless @z-index
#logo
z-index: 20
position: absolute
#logo2
position: absolute
// css文件
#logo {
z-index: 20;
position: absolute;
}
#logo2 {
position: absolute;
z-index: 1;
}
函数方法
我们可以在stylus文件里面定义函数，然后在后面调用（当没有参数的时候，可以直接使用arguments来代替）
// stylus文件
border-radius(val)
-webkit-border-radius: val
-moz-border-radius: val
border-radius: val
button
border-radius(5px);
// css文件
button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Interpolation(插值)
// stylus文件
vendors = webkit moz o ms official
border-radius()
for vendor in vendors
if vendor == official
border-radius: arguments
else
-{vendor}-border-radius: arguments
#content
border-radius: 5px
// css文件
#content {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
@import
引入外来stylus文件，就可以使用里面定义的函数和变量来
@import('main.css') 当没有指定文件后缀的时候默认为stylus
@import('style/') 当文件名都没有指定时，默认为文件夹里面的main.styl或index.styl
@font-face
// stylus文件
@font-face
font-family Geo
font-style normal
src url(fonts/geo_sans_light/GensansLight.ttf)
.ingeo
font-family Geo
// css文件
@font-face {
font-family: Geo;
font-style: normal;
src: url("fonts/geo_sans_light/GensansLight.ttf");
}
.ingeo {
font-family: Geo;
}
@media
// stylus文件
@media print
#header
#footer
display none
// css文件
@media print {
#header,
#footer {
display: none;
}
}
@keyframes
// stylus文件
@keyframes pulse
0%
background-color red
transform scale(1.0) rotate(0deg)
33%
background-color blue
-webkit-transform scale(1.1) rotate(-5deg)
// css文件
@-moz-keyframes pulse {
0% {
background-color: #f00;
transform: scale(1) rotate(0deg);
}
33% {
background-color: #00f;
-webkit-transform: scale(1.1) rotate(-5deg);
}
}
@-webkit-keyframes pulse {
0% {
background-color: #f00;
transform: scale(1) rotate(0deg);
}
33% {
background-color: #00f;
-webkit-transform: scale(1.1) rotate(-5deg);
}
}
@-o-keyframes pulse {
0% {
background-color: #f00;
transform: scale(1) rotate(0deg);
}
33% {
background-color: #00f;
-webkit-transform: scale(1.1) rotate(-5deg);
}
}
@keyframes pulse {
0% {
background-color: #f00;
transform: scale(1) rotate(0deg);
}
33% {
background-color: #00f;
-webkit-transform: scale(1.1) rotate(-5deg);
}
}
