stylus入门学习笔记

---

title: stylus入门学习笔记

date: 2018-09-06 17:35:28

tags: [stylus]

description: 学习到 vue， 有人推荐使用 stylus 这个 css 预处理器。而之前也只是停留在听说过 stylus，并没有实际操作过。现在正好抽空来学习一下呗；如果会 less，sass之类的 css 预编译器，学 stylus 也是 so easy！

学习到 vue， 有人推荐使用 stylus 这个 css 预处理器。而之前也只是停留在听说过 stylus，并没有实际操作过。现在正好抽空来学习一下呗；如果会 less，sass之类的 css 预编译器，学 stylus 也是 so easy！

学习来源：张鑫旭个人博客，这是个 css 界大牛哦

话不多说，先来段代码比较一下吧。

body
    color: white
    textarea, input
        border: 1px solid #333
    p
    li
    ul
        margin: 0
    .contain
        &:hover
            opacity: 0.8

等同于

body {
    color: white;
}
body textarea,
body input {
    border: 1px solid #333;
}
body p,
body li,
body ul {
    margin: 0;
}
body .contain:hover {
    opacity: 0.8;
}

目前看来，stylus 就是将 sass 的花括号去掉，分号不要而已。按照之前的 sass、less 的语法写，就差不了太多。所以不做多解释，继续下面。

有 stylus 无法处理的属性值，可以使用 unquote()

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

转化成

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

#声明变量

直接使用 '=' 来声明, 变量中可以带 $ 符

font-size = 14px
$color = #ddd
body {
    font-size: font-size
    background-color: $color
}

等同于

body {
    font-size: 14px;
    background-color: #ddd;
}

#插值

Stylus支持通过使用{}字符包围表达式来插入值，其会变成标识符的一部分。例如，-webkit-{'border' + '-radius'}等同于-webkit-border-radius.

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

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

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

button
  border-radius 1px 2px / 3px 4px

转换成

button {
  -webkit-border-radius: 1px 2px / 3px 4px;
  -moz-border-radius: 1px 2px / 3px 4px;
  border-radius: 1px 2px / 3px 4px;
}

插值也可以在选择器上起作用。eg:

table
  for row in 1 2 3
    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;
}

利用这个属性，我们可以封装很多的方法了。将浏览器兼容前缀写法封装成一个函数。

add-attr-prefix(attr, args) {
    -webkit-{attr}: args
    -moz-{attr}: args
    -o-{attr}: args
    -ms-{attr}: args
    {attr}: args
}

// 封装一下 box-shadow 函数
box-shadow()
    add-attr-prefix('box-shadow', arguments)
body
    box-shadow: 8px 8px 20px red

等价于

body {
    -webkit-box-shadow: 8px 8px 20px red;
    -moz-box-shadow: 8px 8px 20px red;
    -o-box-shadow: 8px 8px 20px red;
    -ms-box-shadow: 8px 8px 20px red;
    box-shadow: 8px 8px 20px red;
}

#混合书写

混入和函数定义方法一致，但是应用却大相径庭。

定义方式：

aaa ()
    语句块

譬如，

border-radius(npx)
    -webkit-border-radius npx
    -moz-border-radius npx
    border-radius npx
.box
    border-radius(5px)
// 使用混入书写，你可以完全忽略括号，提供梦幻般私有属性的支持。
    border-radius 5px

也可以不传参数，用 arguments

border-radius()
    -webkit-border-radius arguments
    -moz-border-radius arguments
    border-radius arguments
box-shadow(args...)
    -webkit-box-shadow args
    -moz-box-shadow args
    box-shadow args
box-shadow1()
    -webkit-box-shadow agruments
    -moz-box-shadow agruments
    box-shadow agruments
.box
    box-shadow 1px 1px 5px red, 1px 3px 5px green
.box1
    box-shadow 1px 1px 5px red, 1px 3px 5px green

需要注意的是，argument 和 args...，前者可以准确的将所有参数传递，包括逗号之类的一些特殊符号。

看一下输出结果：

.box {
    -webkit-box-shadow: #ddd 1px 1px #eee 2px 2px;
    -moz-box-shadow: #ddd 1px 1px #eee 2px 2px;
    box-shadow: #ddd 1px 1px #eee 2px 2px;
}
.box1 {
    -webkit-box-shadow: #ddd 1px 1px, #eee 2px 2px;
    -moz-box-shadow: #ddd 1px 1px, #eee 2px 2px;
    box-shadow: #ddd 1px 1px, #eee 2px 2px;
}

同 less， sass 一样，引用父级也是用 &；利用 & 封装一个条纹表格

stripe(even = #fff, odd = #eee)
    tr
        background-color odd
        &.even
        &:nth-child(even)
            background-color even

函数是可以返回值的。有时候返回值不是一个具体的值，而是表示符。

swap(a, b)
    b a

这样的时候，写成

swap(a, b)
    (b a)
swap(a, b)
    return b a

个人在实际项目中用到的方法少之又少；所以感觉，不做游戏开发的话，用到方法的少。看到这儿，就算是已经入门了。

#注释

Stylus支持三种注释，单行注释，多行注释，以及多行缓冲注释。

前面三种就不多说了，和以前的写法完全一致。对于多行缓冲注释，跟多行注释类似，不同之处在于开始的时候，这里是/*!.这个相当于告诉Stylus压缩的时候这段无视直接输出。

#条件

if， else if, else 和常见的条件是一样的。在 stylus 里，也想 ruby 一样，用了 unless (除非)条件。也很好理解，其基本上与 if 相反，本质上是 (!(expr)). eg：

disable = true

unless disable
    display none

另外，Stylus 支持后缀条件，这就意味着 if 和 unless 可以当作操作符；当右边表达式为真的时候执行左边的操作对象。

一般适用于单行语句。

譬如：

negative(n)
  unless n is a 'unit'
    error('无效数值')
  if n < 0
    yes
  else
    no
// 就可以写成下面这种形式了
negative(n)
  error('无效数值') unless n is a 'unit'
  return yes if n < 0
  no

#迭代

for <val-name> [, <key-name>] in <expression>

感觉实际开发中用不到，暂时先放着，待后续补齐吧。

#@import

任何 .css 扩展的文件名将作为字面量。例如，

@import "reset.css"

// 渲染成 ===>>
@import "reset.css"

当使用 @import 没有 .css 扩展，会被认为是 Stylus 片段（如：@import"mixins/border-radius"）。

@import 工作原理为：遍历目录队列，并检查任意目录中是否有该文件（类似 node 的 require.paths）。该队列默认为单一路径，从 filename 选项的 dirname 衍生而来。因此，如果你的文件名是 /tmp/testing/stylus/main.styl，导入将显现为 /tmp/testing/stylus/。

@import 也支持索引形式。这意味着当你 @import blueprint,则会理解成 blueprint.styl 或 blueprint/index.styl. 对于库而言，这很有用，既可以展示所有特征与功能，同时又能导入特征子集。

还有像 @media，@font-face，@keyframes 等和 css 中的差不了太多。

注意，@keyframes 会通过 vendors 变量，会自动添加私有前缀(webkit moz official)。如果我们只想有标准解析，很简单，修改 vendors = official.

#@extend

看个例子感受。

red = #E33E1E
yellow = #E2E21E

.message
  padding: 10px
  font: 14px Helvetica
  border: 1px solid #eee

.warning
  @extends .message
  border-color: yellow
  background: yellow + 70%

.error
  @extends .message
  border-color: red
  background: red + 70%

.fatal
  @extends .error
  font-weight: bold
  color: red

生成 css 如下

.message,
.warning,
.error,
.fatal {
  padding: 10px;
  font: 14px Helvetica;
  border: 1px solid #eee;
}
.warning {
  border-color: #e2e21e;
  background: #f6f6bc;
}
.error,
.fatal {
  border-color: #e33e1e;
  background: #f7c5bc;
}
.fatal {
  font-weight: bold;
  color: #e33e1e;
}

ok, stylus 的学习，就简单到这儿了吧。后面有必要再深入学习一波。

---

---

那一夜我烧毁了所有的记忆,从此我的梦就透明了,那一天我扔掉了所有的昨天,从此我的脚步就轻盈了。 一一 泰戈尔(《飞鸟集》)