stylus学习笔记

Stylus使用

参考自：

http://www.zhangxinxu.com/jq/stylus/variables.php

https://segmentfault.com/a/1190000002712872#articleHeader1

安装

使用全局安装命令：

npm install stylus -g

项目创建和编译

建立测试目录文件夹stylus_test;

在stylus_test下新建test.styl文件

编写代码

body
    color: red

然后在文件夹stylus_test目录下运行命令stylus test.styl,待出现compiled test.css后 即编译完成，此时可在目录下看到一个css文件test.css，test.css的内容为

body {
    color: #f00;
}

主要语法

1. 选择器简写

body {
    color: #f00;
}

这个实例中的{ } : ;等三个符号都是可以省略的；即写成

body
    color #f00

使用逗号为多个选择器同时定义属性,使用新行是一样的效果：

textarea, input
    border 1px solid #eee
=========================
textarea
input
    border 1px solid #eee

使用字符&指向父选择器

textarea
input
    color #A7A7A7
    &:hover
        color #000

对父选择器下所有的元素都添加伪类效果，等同于

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}

2.变量使用

三种方式

2.1.使用表达式定义变量

font-size = 14px

body
    font font-size

2.2.属性内部定义变量

#prompt
    width: w = 200px
    margin-left: -(w / 2)

2.3.使用@+属性名应用变量

#prompt
    width: 200px
    margin-left: -(@width / 2)

3.嵌套

同less、sass相似

header
    #logo
        border:1px solid red

4.方法

4.1.基础

有返回值的方法

add(a, b)
    a + b

在属性值中使用

body 
    padding add(10px, 5)

4.2.默认参数

add(a, b = a)
  a + b

add(10, 5)
// => 15

add(10)
// => 20

4.3.内置unit()强制改变数值单位

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

add(15%, 10deg)
// => 25

4.4.多个返回值

sizes()
    15px 10px

sizes()[0]
// => 15px

5.插值

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

vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  {prop} args

border-radius()
  vendor('border-radius', arguments)

box-shadow()
  vendor('box-shadow', arguments)

button
  border-radius 1px 2px / 3px 4px

6.运算符

与sass、less类似，除记简单外，随用随查即可

总结

stylus与less、sass相比，最亮眼的优点就是可以省略大量的符号，在满足代码清晰不混乱的前提下，只保留必要的符号即可，可以大大减少代码量。而其它的变量、函数等大类和后两者类似。