stylus
stylus是一款 CSS 的预处理器,使用它可以创建健壮的、动态的、富有表现力的CSS。
用法
# install
npm install stylus -g
# watch and complie stylus file from command line
stylus -w style.styl -o style.css
语法
注释
- // 单行
- /多行,压缩后不输出/
- /!压缩后输出/
大括号, 分号,逗号都可以省略
这是python
风格
body
color white
- 多个选择器可以使用同一个样式
textare, input
border 1px solid #eee
# 或者之间不用逗号,用新行
textarea
input
border 1px solid #eee
- 变量:没有前缀,直接用等号赋值
main-color = #555
color main-color
- 混合(mixin)
pad(x,y)
padding x y
#log
pad(5px, 10px)
- 函数(function),和mixin相似,有返回值
add(x, y)
x + y
body
padding add(5px, 5)
- 函数arguments代表参数
border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments
# 下面两种方式都可以
border-radius(5px)
border-radius: 5px
- rest params
box-shadow(args...)
-webkit-box-shadow args
-moz-box-shadow args
box-shadow args
- @ 规则
- @css {} //{}里面的不会编译
- @block{} //作为一个块,赋值给一个变量
- @media //和css中用法一样
&
指向最近的选择器
# &指向textare
textare
color #afafaf
&:hover
color #000
- ^[N]N是数字,0代表第一个级别,最后一个级别是&
.foo
.bar
width: 10px
^[1]
width: 20px
# ^[0]指向.foo
# ^[1]指向.bar
@import
引入文件
@import "a.styl"
#使用require引入
@require "a.styl"
#引入所有product文件夹下的文件
@import 'product/*'
#块级引用
.foo
@import 'bar.styl'
interpolation
插值,用{}括起来
vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args
border-radius()
vendor('border-radius', arguments)
button
border-radius 4px
- 条件
if
else if
else
box(x, y, margin = false)
padding y x
if margin
margin y x
body
box(5px, 10px, true)
- 循环
for in
body
for num in 1 2 3
foo num
- 操作符(operators)
可以在
stylus -i
交互命令行中测试
- 一元运算符
以下一元运算符可用,!, not, -, +, 以及~.
!0 // => true
!!0 // => false
!1 // => false
!!5px // => true
-5px // => -5px
--5px // => 5px
not true // => false
not not true // => true
#逻辑运算符not的优先级较低
not a or b // => false
// 解析为: not (a or b)
- 二元运算符
#加减:+ -
15px - 5px // => 10px
5 - 2 // => 3
5in - 50mm // => 3.031in
5s - 1000ms // => 4s
20mm + 4in // => 121.6mm
"foo " + "bar" // => "foo bar"
"num " + 15 // => "num 15"
#乘除:/ * %
2000ms + (1s * 2) // => 4000ms
5s / 2 // => 2.5s
4 % 2 // => 0
#指数:**
2 ** 8 // => 256
- 相等与关系运算:== != >= <= > <
true例子:
0% 0px 1px -1 -1px hey 'hey' (0 0 0) ('' '')
false例子:
0 null false ''
- in 操作
nums = 1 2 3
1 in nums
- 实例检查:is a
15 is a 'unit' // => true
#fff is a 'rgba' // => true
- 变量定义:is defined
foo is defined // => false
foo = 15px
foo is defined // => true