css预处理器的使用

stylus

stylus个人通俗一点认为就是css的框架，可以简化css代码的书写，和支持一些模块化的使用方式！

base.stylu文件中：
RemoveDefault()
    appearance: none
    border:none
    outline: none
$red = rgb(255,69,0) //定义$red  在引入base.styl的其他styl 中直接使用$red 即可！ 
//base.styl这个 styl文件中定义了一个函数RemoveDefault() 里面封装了一些常用样式。
当在其他styl文件或者 Vue的lang=“stylus” 的script中，使用 @import 'base.styl',
然后直接 使用 RemoveDefaul()就相当于书写上面三个样式！！！

ex:
1.styl 中：
@import 'base.styl'
.main
     RemoveDefault() //直接使用函数
     color:#ccc
     font-size:14px

带参数的函数的使用
test(c,border = false)
    if( border == true )
        border 1px solid c
    else 
        background-color:#FFA500

usetest() //其他styl 通过函数中转调用还是 直接传参调用test()都可！
    test(red,true)

css框架极大的提高了css代码的复用性，可以把一类好看的组件样式抽离为一个文件，后续用到直接引入文件调用函数即可！！！

 

sass

sass的混合器实现大段样式的重用:

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最终生成：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

更多语法： Sass基础教程 Sass快速入门 Sass中文手册 | Sass中文网

less

Less 快速入门 | Less.js 中文文档 - Less 中文网 (bootcss.com)