stylus的用法

参考连接：预处器的对比——Sass、LESS和Stylus   http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocessor-shootout.html

由于在vue.js项目（高仿饿了么app）中会用到stylus，因此本文重点关注stylus的用法

1.语法

Stylus的语法花样多一些，它使用“.styl”的扩展名，Stylus也接受标准的CSS语法，可是他也接受不带花括号和分号的语法，以下所示：

/* style.styl */
h1 {
  color: #0982C1;
}
/* 省略花括号 */
h1
  color: #0982C1;
/* 省略花括号和分号 */
h1
  color #0982C1

2.变量

你能够在CSS预处理器中声明变量,并在整个样式表中使用。CSS预处理器支持任何变量（例如：颜色、数值（无论是否包括单位）、文本）。而后你能够在任意地方引用变量。

Stylus声明变量没有任何限定,你能够使用"$"符号开始。结尾的分号(;)无关紧要,但变量名和变量值之间的等号(=)是须要的。有一点须要注意的是,若是咱们使用"@"符号开头来声明（0.22.4）变量，Stylus会进行编译，但其对应的值并不会赋值给变量。换句话说，在Stylus中不要使用“@”符号开头声明变量。

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

上面的代码都将转译成相同的CSS。你能够想像一下,变量的做用有多大。咱们不须要为了修改一个颜色而输入许屡次,也不须要为了修改一个宽度去到找寻找他.(咱们只须要修改定义好的变量,修改一次就足够).下面是转译过来的CSS代码:

 body {
  color: #0982c1;
  border: 1px dotted #0982c1;
  max-width: 1024px;
} 

3.嵌套

若是咱们在CSS中多个元素有一个相同的父元素，那么写样式会变得很乏味，咱们须要一遍一遍的在每一个元素前写这个父元素.

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
} 

相反，使用CSS预处理器，咱们能够在父元素的花括号({})写这些元素。同时可使用“&”符号来引用父选择器。

section {
  margin: 10px;
  nav {
    height: 25px;
    a {
      color: #0982C1;
      &:hover {
        text-decoration: underline;
      }
    }
  }
} 

4.混合

Mixins是预处器中的函数。平时你在写样式时确定有碰到过，某段CSS样式常常要用到多个元素中，这样你就须要重复的写屡次。在CSS预处器中，你能够为这些公用的CSS样式定义一个Mixin，而后在你CSS须要使用这些样式的地方，直接调用你定义好的Mixin。这是一个很是有用的特性。Mixins是一个公认的选择器，还能够在Mixins中定义变量或者是默认参数。

能够不使用任何符号，就是直接定义Mixins名，而后在定义参数和默认值之间用等号（=）来链接。

 /* Stylus 定义了一个名叫error的mixin，这个error设置了一个参数“$borderWidth”,在没特别定义外，这个参数的值是默认值2px */
error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* 调用error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* 调用error mixins，并将参数$borderWidth的值指定为5px */
} 

转译后：

.generic-error {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  border: 5px solid #f00;
  color: #f00;
}

5.继承

在多个元素应用相同的样式时，咱们在CSS一般都是这样写：

p,
ul,
ol {
  /* 样式写在这 */
} 

这样作很是的好，但每每咱们须要给单独元素添加另外的样式，这个时候咱们就须要把其中选择器单独出来写样式，这样一回来咱们维护样式就至关的麻烦。为了应对这个问题，CSS预处理器能够从一个选择继承另外一个选择器下的全部样式。

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block; /* 继承.block全部样式 */
  border: 1px solid #EEE;
}
ul, ol {
  @extend .block; /* 继承.block全部样式 */
  color: #333;
  text-transform: uppercase;
}  

转译后：

.block, p, ul, ol {
  margin: 10px 5px;
  padding: 2px;
}
p {
  border: 1px solid #EEE;
}
ul, ol {
  color: #333;
  text-transform: uppercase;
}  

6.导入

在CSS中，并不喜欢用@import来导入样式，由于这样的作法会增长HTTP的请求。可是在CSS预处理器中的导入（@import）规则和CSS的有所不一样，它只是在语义上导入不一样的文件，但最终结果是生成一个CSS文件。若是你是经过“@import 'file.css'”导入“file.css”样式文件，那效果跟普通CSS导入样式文件同样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，所以须要避免他们的相互冲突。

/* file.{type} */
body {
  background: #EEE;
}

@import "reset.css";
@import "file.{type}";
p {
  background: #0982C1;
} 

转译后

@import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}  

7.颜色函数

颜色函数是CSS预处里器中内置的颜色函数功能，这些功能能够对颜色值进行处理，例如颜色的变亮、变暗、渐变颜色等处理十分的方便。

lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */
darken(color, 10%);  /* 返回的颜色在'color'基础上变暗10% */
saturate(color, 10%);   /* 返回的颜色在'color'基础上饱和度增长10% */
desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度下降10% */  

下面是Stylus颜色函数的一个简单实例

color = #0982C1
h1
  background color
  border 3px solid darken(color, 50%)  

8.运算符

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 100px - 50px;
  left: 10 * 10;
} 

实际运用

属性前缀

border-radius(values) {
  -webkit-border-radius: values;
     -moz-border-radius: values;
          border-radius: values;
}
div {
  border-radius(10px);
} 

转译后

div {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}  

浏览器前缀的问题，主要是针对于CSS3属性的运用，众所周知，CSS3的属性有并非全部浏览器都支持属性的标准语法，所以在实际运用中时，不得不加上各浏览器的前缀来识别。