Stylus-富有表现力的、动态的、健壮的CSS

今天总结一下Stylus记一些常用的也是最基本的用法

一.  选择器

Stylus是基于缩进的这让我们可以更快捷的编写css比如

body {
    margin: 0;
    paddind: 0;
    font-size: 12px;
    background: red;
}

使用stylus基于缩进的写法：
body
    margin 0;
    padding 0;
    font-szie 12px;
    background red

 规则级

我们常常将重复的代码写在一起这样能让我们少些很多代码,

.header, .main {
    margin: 5px;
    border: 1px solid orange
}

Stylus就跟css一样使用,分隔同时为多个元素定义属性

.header,  .main
     margin 5px;
     border 1px solid orange

 父级引用

字符&指向父选择器

a 
  color red
  &:hover 
       color  orange

就相当于

a {
    color: red
}

a:hover {
    color: orange
}

二：变量

变量(Variables)

变量

我们可以指定表达式为变量，然后在我们的样式中贯穿使用：

font-size = 14px

header 
      font-size font-size

三.插值(Interpolation)

插值

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

partOfProp = radius
value = 10px
div
    border-{partOfProp} value  /*切记属性值这里不可以使用插值*/

四：运算符

comWidth = 980px

.innerWidth
         comWidth - 20px;

五：混合书写

混入

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

例如，下面有定义的border-radius(n)方法，其却作为一个mixin（如，作为状态调用，而非表达式）调用。

当border-radius()选择器中调用时候，属性会被扩展并复制在选择器中。

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

.innerWidth
   width 200px
   height 200px
   border 1px solid red
   border-radius(50%)
   

六：方法(Functions)

函数

Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致；却可以返回值。

返回值

add(a, b)
  a + b

.innerWidth
  width add(50px, 5)
  height add(20px, 5)
  border 1px solid red

默认参数

可选参数往往有个默认的给定表达。在Stylus中，我们甚至可以超越默认参数。

add(a, b = a)
  a + b

.innerWidth
  width add(50px, 5)
  height add(20px)
  border 1px solid red

当没有指定第二个参数就会使用默认参数b=a 也就是加上20

我们可以把简单的add()方法更进一步。通过内置unit()把单位都变成px, 因为赋值在每个参数上，因此，我们可以无视单位换算。

add(a, b=a)
  a = unit(a, px)
  b = unit(b, px)
  a + b

.innerWidth 
    width add(15%, 10deg)
    height 200px;
    border 1px solid red