Stylus - 富有表现力的、动态的、健壮的CSS

Stylus - 富有表现力的、动态的、健壮的CSS

Stylus安装

Stylus安装如下，先去nodejs官方下载页面下载安装nodejs，支持window系统，直接双击安装。然后，安装stylus包，如下代码：

cnpm install stylus

选择器(Selectors)

缩排(Indentation)

Stylus蛮“玄幻”的(如基于缩进)，空格有重要的意义，所以，我们使用缩排和凹排代替花括号{以及}

body

  color white

body

  color: white

body {

  color: #fff;

}

规则集

Stylus就跟CSS一样，允许你使用逗号为多个选择器同时定义属性,使用新行是一样的效果;

textarea, input

  border 1px solid #eee

textarea

input

  border 1px solid #eee

父级引用------------------字符&指向父选择器。

有Stylus无法处理的属性值？unquote()可以帮你：

filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')

生成为：

filter progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

变量(Variables)

变量

我们可以指定表达式为变量,然后在我们的样式中贯穿使用：

font-size = 14px

 

body

  font font-size Arial, sans-seri

编译为：

body {

  font: 14px Arial, sans-serif;

}

属性查找

Stylus有另外一个很酷的独特功能，不需要分配值给变量就可以定义引用属性

#logo

  position: absolute

  top: 50%

  left: 50%

  width: 150px

  height: 80px

  margin-left: -(@width / 2)

  margin-top: -(@height / 2)

 

position()

  position: arguments

  z-index: 1 unless @z-index

 

body

  color: red

  ul

    li

      color: blue

      a

        background-color: @color

 

 

插值(Interpolation)

插值--------Stylus支持通过使用{}字符包围表达式来插入值，其会变成标识符的一部分

table

  for row in 1 2 3 4 5

    tr:nth-child({row})

      height: 10px * row

 

方法(Functions)

函数----------------------Stylus强大之处就在于其内置的语言函数定义。

返回值

add(a, b)

  a + b

默认参数

add(a, b = a)

  a + b

参数

arguments是所有函数体都有的局部变量，包含传递的所有参数。

 

内置方法(Built-in Functions)

red(color)-----------------------返回color中的红色比重。

green(color)-------------------返回color中的绿色比重。

blue(color)---------------------返回color中的蓝色比重。

alpha(color)--------------------返回color中的透明度比重。

dark(color)----------------------检查color是否是暗色。

abs(unit)-----------------------绝对值。

ceil(unit)------------------------向上取整。

floor(unit)-----------------------向下取整。

round(unit)----------------------四舍五入取整。

......

 

其余参数(Rest Params)

其余参数------------------Stylus支持name...形式的其余参数

box-shadow(args...)

     box-shadow args

#login

  box-shadow 1px 2px 5px #eee

 

条件(Conditionals)

条件--------提供了语言的流控制，否则就是纯粹的静态语言。提供的条件有导入、混入、函数以及更多。

if / else if / else

除非(unless)

后缀条件