stylus跟less sass做的是同样的事情,之间有很多共同的地方,比如变量、计算的想法
归纳下stylus基础知识
参数
例如CSS3私有属性,每次都要输入很麻烦,可以采用传参数的形式来解决
styl
vender(n,arg) //{}可以用来传参数
-webkit-{n} arg
-moz-{n} arg
{n} arg
border-radius() //一定要加括号
vender('border-raidus',arguments) //arguments默认参数
ul
border-radius 2px //只需要写border-radius的值即可
编译后的css
ul {
-webkit-border-raidus: 2px;
-moz-border-raidus: 2px;
border-raidus: 2px;
}
方法function
很强大的功能,CSS也可以用写函数的方式来做,同时还会有返回值
styl
add(a,b=a) //只有一个参数也可以计算
a = unit(a,px) //把单位都变成px
b = unit(b,px) //把单位都变成px
//a+b
return a b a+b //可以返回多个值,通过[0][1][2]调用
li
width add(14px)[0]
height add(14px,20px)[1]
font-size add(14px,20px)[2]
编译后的css
li {
width: 14px;
height: 20px;
font-size: 34px;
}
运算符
加减乘除 逻辑运算等等;
亲测,不太靠谱,语法结构不严谨造就了各种各样的debug,我暂时不用