Stylus 笔记 - Githubissues

这篇文章不适合不了解 Sass 的读者阅读，对初学者不友好，因为我只是在列举一些差异和在 Sass 的基础上讲解一些厉害的用法

前言

这个 CSS 预处理器看起来强大得有点厉害了。不过很多与 Sass 是类似的，我挑选一些我觉得比较好的记录一下。

选择器

让人感觉很不同的是 stylus 采用的是像 Python 一样的缩进来写样式块。

body
  color: #fff

会被编译为这样：

body {
  color: #fff;
}

其他一些写法是：

// 多个选择器
textarea
input
  border: 1px solid #eee

// 父级引用
textarea
input
  color: #a7a7a7
  &:hover
    color: #000

变量

font-size = 14px // 声明变量

body
  font: font-size Arial, sans-serif

// 属性查找：借助 `@` 使用前面已经定义过的属性
#logo
  position: absolute
  top: 50%
  left: 50%
  width: 150px
  height: 80px
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)

插值

// 使用 `{}` 来包围表达式进行插值
table
  for row in 1 2 3 4 5
    tr:nth-child({row})
      height: 10px * row

操作符

基本你能想到的都能用，有些你想不到的也能用==！我说个有点有趣的，虽然我还不知道这鬼东西哪里用得上orz。

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

Mixin

基本用法和 Sass 是一样的，而且不需要用关键字声明。使用时也不需要用关键字。

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

form input[type=button]
  border-radius(5px)

函数

这个定义时的写法和 mixin 是一样的，不同的是函数会返回一个值。这函数的参数还能有默认值和借助name...使用 rest 参数，内部还能用 arguments。stylus 还提供了一大堆的內建函数。

// 定义一个函数
add(a, b)
  a + b

body 
  padding: add(10px, 5)

结尾

这样，我大概有幸触摸了 1% 的特性:)。最后，给 TJ 大神磕头了，一想到用过的那么多东西都是你写的，我竟无语凝噎。我还有个大胆的想法，竟然这些预处理器写得越来越像 JavaScript，干脆把 CSS 和 JavaScript 合并，一起写吧，但我还是太天真了，把 CSS 写入 JavaScript 早已有了，而且很多，其中一个就是 styled-components，○|￣|_。

yangkean / blog

Stylus 笔记 #8

前言

选择器

变量

插值

操作符

Mixin

函数

结尾

Reference