stylus_基础语法(参数/function/运算符)

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,我暂时不用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容