最近在研究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稍微简单写,不需要加@
暂时就写这些把。