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
        width: 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