20181122——Css的stylus

Stylus基本使用
在学习一个 Vue.js 项目的过程中，注意到源码中样式的部分并没有用熟悉的 .css 样式文件，而是发现了代码长得和 CSS 相像的 .styl 文件。这个 .styl 以前没见过啊，你是谁？于是开始一顿搜索。

发现文件后缀是. styl 的这个哥们儿学名叫 stylus，是 CSS 的预处理框架。

CSS 预处理，顾名思义，预先处理 CSS。那 stylus 咋预先处理呢？stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 CSS 文件。
Stylus - 富有表现力的、动态的、健壮的CSS

CSS需要有个巴神
下面中规中矩的CSS代码是否看得眼睛生茧了？

body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
如果我们让花括号卖锅
body
font: 12px Helvetica, Arial, sans-serif;

a.button
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
又或者是分号酱油
body
font: 12px Helvetica, Arial, sans-serif

a.button
-webkit-border-radius: 5px
-moz-border-radius: 5px
border-radius: 5px
冒号，你妈看你回家吃饭
body
font 12px Helvetica, Arial, sans-serif

a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px
来点干货
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments

body
font 12px Helvetica, Arial, sans-serif

a.button
border-radius(5px)
明显的混合书写又如何？
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments

body
font 12px Helvetica, Arial, sans-serif

a.button
border-radius 5px
创建与分享
@import ‘vendor’

body
font 12px Helvetica, Arial, sans-serif

a.button
border-radius 5px
甚至是语言函数
sum(nums…)
sum = 0
sum += n for n in nums

sum(1 2 3 4)
// => 10
如果所有都是可选的又将怎样？
fonts = helvetica, arial, sans-serif

body {
padding: 50px;
font: 14px/1.4 fonts;
}

阅读stylus中文文档
选择器(Selectors)

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

body
  color white
上面代码就对应于：

body {
  color: #fff;
}
如果你喜欢，你可以把冒号加上，用做分隔，便于阅读：

body
  color: white

规则集

规则集
Stylus就跟CSS一样，允许你使用逗号为多个选择器同时定义属性。

textarea, input
  border 1px solid #eee
使用新行是一样的效果：

textarea
input
  border 1px solid #eee
等同于：

textarea,
input {
  border: 1px solid #eee;
}

父级引用

字符&指向父选择器。下面这个例子，我们两个选择器(textarea和input)在:hover伪类选择器上都改变了color值

textarea
input
  color #A7A7A7
  &:hover
    color #000
等同于：

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}
下面这个例子，IE浏览器利用了父级引用以及混合书写来实现2px的边框。

  box-shadow()
    -webkit-box-shadow arguments
    -moz-box-shadow arguments
    box-shadow arguments
    html.ie8 &,
    html.ie7 &,
    html.ie6 &
      border 2px solid arguments[length(arguments) - 1]

  body
    #login
      box-shadow 1px 1px 3px #eee
其变身后面目：

  body #login {
    -webkit-box-shadow: 1px 1px 3px #eee;
    -moz-box-shadow: 1px 1px 3px #eee;
    box-shadow: 1px 1px 3px #eee;
  }
  html.ie8 body #login,
  html.ie7 body #login,
  html.ie6 body #login {
    border: 2px solid #eee;
  }

为什么选择stylus