预处理语言

stylus

http://www.zhangxinxu.com/jq/stylus/selectors.php

安装

stylus 基于 nodejs， sass 基于 roby，这也是为什么前端 stylus 越来越火的原因
npm install stylus -g

编译为 css
stylus xxx.styl -o xxx.css //xxx是你创建的文件名 -o 的意思是-out 输出css文件
动态监听实时编译
stylus -w xxx.styl -o xxx.css //在原有的基础上加了-w w的意思是watch，也就是监听

• 书写规范
  在 stylus 中，拓展名为 .styl，不需要写 {} ; ，只需要正确的缩进/空格/换行

*
	margin 0
	padding  0
.box
	width 100px
	heighti 100px
	box-sizing border-box

---

注释

css 中注释只支持 /* */
stylus 中支持 //

---

运算符

范围.. ...

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

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

+ - * /

15px - 5px
// => 10px
5s - 1000ms
// => 4s
"foo " + "bar"
// => "foo bar"
"num " + 15
// => "num 15"

需要注意的是，如果在属性值中使用 / 必须()包裹

.box
  width (10px /2)

.box
  width 10px
  .item
    width (@width / 2)

---

变量

不定义

bgc = green
fz = 10px
.box
  backgournd bgc
  font-size fz

$定义变量

$bgc = yellow
$fz = 10px 
.box
  backgournd bgc
  font-size fz

• 变量之间可以互相引用

$w = 10px
$c = red 
$bor = $w solid $c

• 高级

注意，在变量声明的地方必须有 ：
.box
  position absolute
  top: $s = 50%
  left $s
  width: w = 150px
  height: h = 80px
  margin-left -(w / 2)
  margin-top -(h / 2)

甚至可以不使用这里的变量w和h, 而是简单地前置@字符在属性名前来访问该属性名对应的值
也就是说 @+属性名 可以当做变量使用

.box
  position absoluet
  left 50%
  top 50%
  width 150px
  height 150px
  margin-left -(@width / 2)
  margin-top -(@height / 2)

变量的向上冒泡查找

.left
  color: r = red
  .box
    color r


使用形参

```js
border_radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments
.box
  border_radius(5px)

---

混合

混合可以类似于代码块，可以进行代码的复用。支持传参，支持参数默认值
如果调用时传参数可以不写括号

flex_box(w = 10px,h = 5px)
  display flex
  justify-content center
  align-item center
  width w
  height h
.box
  flex_box()
.item
  flex_box 2px 3px
  flex_box 2px3px
  flex_box 2px,3px
 

插值

Stylus支持通过使用{}字符包围表达式来插入值

vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  {prop} args
.box
  vendor(width, 10px)

条件判断

嵌套

导入

sylus还可以引入外部的stylus文件

@import 'xxx'
@import 'common/*'

运算符

内置函数

不同于 mixins，mixins 目的是复用代码块，函数则是返回返回值

add(a,b = a)
  a + b
.box
  add(10px,20px)

Stylus 支持多个返回值。但是不能换行

fn()
  10px 20px
.box
  width fn()[1]

---

vue中 stylus

https://cli.vuejs.org/zh/guide/css.html#css-modules

有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有 Sass/Less 样式传入共享的全局变量：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v7 中，这个选项名是 "data"
        prependData: `@import "~@/variables.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `data` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        prependData: `@import "~@/variables.scss";`
      },
      // 给 less-loader 传递 Less.js 相关选项
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}