stylus用法

stylus

stylus是一款 CSS 的预处理器，使用它可以创建健壮的、动态的、富有表现力的CSS。

用法

# install
npm install stylus -g

# watch and complie stylus file from command line
stylus -w style.styl -o style.css

语法

1. 注释

   • // 单行
   • /多行,压缩后不输出/
   • /!压缩后输出/

2. 大括号， 分号，逗号都可以省略
   这是python风格

body
      color white

1. 多个选择器可以使用同一个样式

textare, input
      border 1px solid #eee

  # 或者之间不用逗号，用新行
  textarea
  input
      border 1px solid #eee

1. 变量:没有前缀，直接用等号赋值

main-color = #555
color main-color

1. 混合(mixin)

pad(x,y)
    padding x y
#log
    pad(5px, 10px)  

1. 函数(function)，和mixin相似，有返回值

add(x, y)
      x + y
body
      padding add(5px, 5)  

1. 函数arguments代表参数

border-radius()
    -webkit-border-radius: arguments
    -moz-border-radius: arguments
    border-radius: arguments
# 下面两种方式都可以
 border-radius(5px)
 border-radius: 5px

1. rest params

  box-shadow(args...)
   -webkit-box-shadow args
   -moz-box-shadow args
   box-shadow args

1. @ 规则
   
   • @css {} //{}里面的不会编译
   • @block{} //作为一个块，赋值给一个变量
   • @media //和css中用法一样
2. &指向最近的选择器

# &指向textare
textare
 color #afafaf
 &:hover
   color #000

1. ^[N]N是数字，0代表第一个级别,最后一个级别是&

.foo
  .bar
    width: 10px
    ^[1]
         width: 20px
# ^[0]指向.foo
# ^[1]指向.bar         

1. @import 引入文件

@import "a.styl"
#使用require引入    
@require "a.styl"
#引入所有product文件夹下的文件  
@import 'product/*'
#块级引用  
.foo
       @import 'bar.styl'     

1. interpolation 插值，用{}括起来

vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  {prop} args
border-radius()
  vendor('border-radius', arguments)
button
    border-radius 4px

1. 条件 if else if else

box(x, y, margin = false)
  padding y x
  if margin
    margin y x
body
  box(5px, 10px, true)

1. 循环 for in

body
  for num in 1 2 3
    foo num

1. 操作符（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