安装

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

编译

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

语法

选择器

缩进
省略了 {} 和 ;

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

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

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


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

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


变量**

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

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

  1. color = dodgerblue
  2. .item
  3. width:100px
  4. height:100px
  5. 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)
  9. 或者不定义的方式:直接通过@就可以引用
  10. margin-left:-(@width/2)

**

插值





**

方法和混写

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

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

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

混合书写的例子

  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]
  7. =>
  8. form input[type=button]{
  9. -webkit-border-radius:5px;
  10. -moz-border-radius:5px;
  11. border-radius:5px;
  12. }
  13. =>
  14. 而且二者都可以使用 arguments 这个局部变量。上述写法也可以改变为:
  15. border-radius()
  16. -webkit-border-radius arguments
  17. -moz-border-radius arguments
  18. border-radius arguments
  19. form input[type=button]
  20. border-radius(5px)




文章链接**

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