安装

  1. npm install stylus -g(全局安装)

编译

  1. 新建文件夹 src  里面新建文件 test.stylus
  3. 执行 stylus src/
  5. 输出 compiled src\test.css

语法

选择器

缩进
省略了 {} 和 ; 

  1. .item
  2.     width:100px
  3.     height:100px

规则集
同时为多个选择器定义属性

  1. 方法一
  2. .item1, .item2
  3.     border:1px solid #ccc
  5. 方法二
  6. .item1
  7. .item2
  8.     border:1px solid #ccc


父级引用**
与less语法相同，采用 字符 & 来指向父选择器

  1. .item
  2.     color dodgerblue
  3.     &:hover
  4.         color #000

变量**

定义变量
首先定义一个表达式变量，我们就可以在后续的样式中使用这个变量了。场景：定义一个颜色变量

即可以定义多个文件引入样式，比如 base文件

  1. color = dodgerblue
  3. .item
  4.     width:100px
  5.     height:100px
  6.     color:color



查找属性值
场景：某些属性和某些属性互相有关系、

  1. #logo
  2.     position:absolute
  3.     top:50%
  4.     left:50%
  5.     width:w=150px
  6.     height:h=80px
  7.     margin-left:-(w/2)
  8.     margin-top:-(h/2)
  10. 或者不定义的方式:直接通过@就可以引用
  11.     margin-left:-(@width/2)

**

插值





**

方法和混写

方法可以返回值，作为表达式调用。Mixin 不能，是作为状态调用

举个方法的例子：我们定义个add函数来做加法。调用时直接加入参数，得到的返回值即可赋在属性中

  1. add(a,b)
  2.     a+b
  3. div1
  4.     width:add(100,200)
  6. =>
  7. div1{
  8.     width:300
  9. }

混合书写的例子

  1. border-radius(n)
  2.     -webkit-border-radius n
  3.     -moz-border-radius n
  4.     border-radius n
  5. form input[type=button]
  6.     border-radius[5px]
  8. =>
  9. form input[type=button]{
  10.     -webkit-border-radius:5px;
  11.     -moz-border-radius:5px;
  12.     border-radius:5px;
  13. }
  15. =>
  16. 而且二者都可以使用 arguments 这个局部变量。上述写法也可以改变为：
  17. border-radius()
  18.   -webkit-border-radius arguments
  19.   -moz-border-radius arguments
  20.   border-radius arguments
  22. form input[type=button]
  23.   border-radius(5px)




文章链接**

https://www.ibm.com/developerworks/cn/web/wa-stylus-css-preprocessor-enhancer/index.html