学习stylus笔记

最近在研究v-cli3.0，发现了一种新的预处理器，于是花了一些时间去学习下。

基本上这个网站上，讲的已经很详情。我下面把我在学习之中的笔记和觉得自己用的多方法贴出来。

1.缩排

使用缩排和凹排代替花括号{以及}

2.消除歧义

类似padding - n的表达式可能既被解释成减法运算，也可能被释义成一元负号属性。为了避免这种歧义，用括号包裹表达式. paddig (- 10px)

3.变量

一种是在外面定义变量，可以用标志符开头,另一种是在css块区域内用@加变量名寻找变量。变量名可以和css属性名相同，变量名可以覆盖css属性名。

4.插值

一种是用函数的方式做浏览器兼容，另一种是选择器插值，用{}来转义变量

5.运算符

注意点是运算符有优先级的先后顺序。范围包含界线操作符(..)和范围操作符(...)。界限操作符是包含界限。

6.函数

函数参数可以有默认参数。函数可以有多个返回值，然后你取其中的值。条件直接用if…else if… else…

7.哈希写法

hash = (one 1) (two 2) (three 3)   

get(hash, two) // 2

8.内置方法

(1) push

nums = 1 2

push(nums, 3, 4, 5) // 1 2 3 4 5

别名为append().

(2) nums = 4 5 

unshift(nums, 3, 2, 1) // 1 2 3 4 5

别名为prepend()

(3) 针对哈希还有两个方法

keys(pairs)   获取键

keys(hash) // one two three

values(pairs)  获取值

values(hash) // 1 2 3

(4) even(unit) 是否为偶数

(5) add(unit) 是否为奇数

(6) sum(nums) 求和

9.其余参数

arguments 会比 args…更好。 args…会少一些符号。

10.注释

单行注释  转换不输出

多行注释  转换输出 

多行缓冲注释  转换不输出

/*!

 * 注释

 */

11.迭代

ss = 0

for n in nums

  ss += n

12 继承

@extend .message

继承class  message的样式

 

下面我就说下自己使用上scss和暂时学到的stylus两者之间的优缺点把。

stylus定义变量可以更多丰富，更有可读性，毕竟scss需要用$开头

stylus的缩排可以加快开发速度。

stylus的继承是可以嵌套选择器的，而scss是不可以的

stylus的条件判断会比scss稍微简单写，不需要加@

 

暂时就写这些把。