css 预编译处理器 - Stylus

stylus 是三大css预编译处理器之一！

一、基础语法

1、语法特性

stylus是一个提倡简洁写法的语言，代码可省略花括号 {}，冒号 ：，引号 ；，当没有使用花括号，需使用缩进进行编写，成为‘python’式书写。

 

2、变量

变量可以是一个值，也可以是一个表达式。

color = red     // 直接赋值定义变量
border = 1px solid grey     // 赋值一个表达式作为变量值
h1
    border border    // 引用变量

// 编译后

h1{
    border: 1px solid grey;
}

为了更好的区分变量或更高的阅读性，可在变量前使用$

$color = red

变量还支持属性查找，无需特定去定义变量。如下

div
    width w = 100px
    height (w/2)

// 编译后

div{
    width: 100px;
    height: 50px;
}

还有一个更酷的属性查找，连 w 都不需要定义,改用@直接引用前面的属性作为变量使用。

div
    width 100px
    height (@width/2)

// 编译后

div{
    width: 100px;
    height: 50px;
}

如果嵌套属性里面存在多个同名属性，那么stylus是 “向上冒泡” 查找属性的。

h1
  color red
    h2
      color green
      h3
        color @color   // green

• 变量赋多值

list = 12px 13px
list[0] // 12px
list[1] // 13px
list  // 12px 13px

 

3、函数（function）

• 返回值

add(a, b)  // 定义函数，接受 a,b 两个参数
    a + b  // 返回a,b 相加值

div
    padding: add(5px,5)  // 带单位传递计算时，取最左侧运算单位，其他数值去除单位进行运算

// 编译后

div{
    padding: 10px;
}

函数定义与混合器定义方法一致，而函数可以有返回值。

• 函数体可以定义默认参数

add(a,b=1)  // 若没有传递b参数，则使用默认值1
    a + b

div
    add(10)px

// 编译后

div{
    padding: 11px;
}

• 命名参数

add(a,b,c)
    a + b + c   // 得到参数结果 a:2  b:1  c:4

div
    padding: add(a:2,c:4, 1)

使用命名传递参数可让我们不必按照顺序传递参数，没有命名的则按顺序往后排序接受参数

• 内置函数

 add(a, b = a)
   a = unit(a, px)
   b = unit(b, px)
   a + b

 add(15%, 10deg)
 // => 25

内置unit函数可以无视传的参数，只使用数值无视传递的单位进行运算，使用自定义的单位返回

查看更多内置函数可阅读 stylus内建函数

• 函数返回多个值

list(a, b)
  a b

div
  padding: list(2px,4px)[0]  // 2px

避免歧义可以使用括号或return标识

list(a, b)
  (b a)

list(a, b)
  return b a

• 函数内使用条件判断返回值

isstring(var)
    if var is a "string"
        yes  // 可以返回你想返回的值
    else
        no

isstring(1) // no
isstring("1") // yes

数值大小判断

test(a,b)
    if a > b
        1
    else
        2

test(1,2)  // 2

• 函数起别名（类似变量赋值）

alis = test(a,b)  // 错，不能直接在函数上赋值起别名
    if a > b
        1
    else
        2

alis = test  // 正确起名别方式


test(1,2)  // 2

• 变量函数

stylus和其他开发语言一样，函数也可以作为其他函数的参数

• 匿名函数（匿名函数可以用 @(){} 进行定义）

list(a, b, fuc)
  if fuc(a, b)
    1
  else
    2

list(1,2, @(a,b){a>b}) // 2

• arguments参数（arguments参数是每一个函数都有的参数，arguments是一个传递的参数数组）

sum()
  n = 0
  for num in arguments
    n += num
sum(1,2,43)

 

4、混合（mixins）

混合器定义方式和函数一致。函数调用结果是返回运算值或指定值。混合器返回的是混合器的整块代码块。

下面是一个典型的混合器应用例子：

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

div
    border-raduis(10px)

// 编译后

div{
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

混合器也可以想函数一样使用 arguments参数，直接使用一连串参数值

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

div
  border-radius(10px,20px)

// 编译后

div{
  -webkit-border-radius: 10px 20px;
  -moz-border-radius: 10px 20px;
  border-radius: 10px 20px;
}

• 父级引用

混合器也和其他预编译处理器一样，可以使用 & 作为父级引用，可以用于伪选择器的使用

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments
  &:hover
    background-color green

• 混合中使用混合

混合器也可以在体内使用其他混合器

mixin1()
    padding 1px

mixin2()
    mixin1()

 

5、插值（interpolation）

在混合器中插值，可以提供公共部分抽取独立，简写代码

典型列子，如下

vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  {prop} args

border-radius()
  vendor('border-radius', arguments)

box-shadow()
  vendor('box-shadow', arguments)

• 选择器插值

table
  for row in 1 2 3 4 5
    tr:nth-child({row})
      height: 10px * row

// 编译后

table tr:nth-child(1) {
  height: 10px;
}
table tr:nth-child(2) {
  height: 20px;
}
table tr:nth-child(3) {
  height: 30px;
}
table tr:nth-child(4) {
  height: 40px;
}
table tr:nth-child(5) {
  height: 50px;
}

 

6、运算符

• 运算符优先级（优先级从上往下）

.
[]
! ~ + -
is defined
** * / %
+ -
... ..
<= >= < >
in
== is != is not isnt
is a
&& and || or
?:
= := ?= += -= *= /= %=
not
if unless

范围运算符（...）

 1..5
 // => 1 2 3 4 5

 1...5
 // => 1 2 3 4

 5..1
 // => 5 4 3 2 1

• 逻辑运算符(&& || and or)

// 逻辑操作符&&和||的别名是and / or。它们的优先级相同。
5 && 3
// => 3

0 || 5
// => 5

0 && 5
// => 0

#fff is a 'rgba' and 15 is a 'unit'
// => true

• 存在运算符（in）

nums = 1 2 3
  1 in nums
  // => true

  5 in nums
  // => false

• 条件赋值(?= :=)

color := white   // 直接覆盖赋值，不管原来有没有值
color ?= white   // 如果有值则不赋值，没有值则赋值

• 实例检查(is a)

15 is a 'unit'
// => true

#fff is a 'rgba'
// => true

15 is a 'rgba'
// => false

• 变量定义检查(is defined)

foo is defined
// => false

foo = 15px
foo is defined
// => true

查看更多条件判断可阅读 stylus条件判断章节

 

7、条件控制

• if  elseif  else

a = 2;
if a > 1
    大于1
else if a < 1
    小于1
else
    等于1

• unless 除非条件

"不大于1" unless 1 > 1    // 如果右边条件成立则不输出，不成立则输出

 

8、注释

• 单行注释（编译时不输出注释）

// 这是注释

• 多行注释（未启用压缩模式时会输出注释）

/*
* 这是注释
*/

• 多行缓冲注释（会无视一切，直接输出注释）

/*!
* 这是注释
*/

 

9、导入

@import "路径/index.css"
@import "路径/index"   // 没有加后缀的文件被认为是stylus的代码片段，认为后缀是styl

 

了解更多更详细的教程可以阅读 stylus官方文档

 

 

注：个人学习笔记，非标准答案，不喜勿喷！