一、npm安装方式：
scss: npm i -d sass-loader node-sass less: npm i -d less-loader less stylus: npm i -d stylus-loader stylus 相关资料网站： scss： https://www.sass.hk/ less： / /p/lesscss/ stylus： http://stylus-/ /jq/stylus/ scss和sass的区别请详见：/docs/scss-for-sass-users/ 二、常用功能对比 1.共同点： (1)引入外部样式文件： @import 'path' //注：在vue-cli框架内使用时，如果想使用相对src下的路径则，在路径前添加 ~@/(不适用于less和stylus下引用.css后缀文件)，例：‘~@/path’ (2)都有选择器嵌套功能 (3单行注释: //都不会被输出到编译后的文件中 (4)都提供了父选择器标识符& (5)都有混合器，混合器都可以传参和设置默认值, 混合器内都可以使用&选择器 (6)都提供了各自的内置函数 (7)都可以使用一些常用的运算符: +-*/ 2.不同点 (1)stylus不需要写;和{},其他两个要写 (2)stylus的混合器样式可用空格代替: (3)scss有属性嵌套功能
font: {family: fantasy;size: 30em;weight: bold;}
//编译结果：
//font-family: fantasy;
//font-size: 30em;
//font-weight: bold
(4)变量的申明方式： scss：$variable-name：value less: @variable-name：value stylus: variable-name = value (5)混合器的使用方式 scss: 声明：@mixin mixin-name ($param:defaultValue ) {...}引入: @include mixin-name ($param:value ) // 注：声明和引用不需传参时()可省略 less：声明：. mixin-name(@param:defaultValue){...}引入: div{.mixin-name(param:value)} // 注：声明时不用传参数时()可省略,但省略后无论是否被引用该样式都会被打包，所以无论是否需要参数都不能省略声明的(), 引入不用传参数时()可省略 stylus: 声明：mixin-name(param=defaultValue){...}引入: div{mixin-name(param:value)} //注：声明时不用 传参数时 ()可省略,但省略后无论是否被引用该样式都会被打包，所以无论是否需要参数都不能省略声明的(), 引 入不用传参数时()不可省略 (6)插值: scss: #{} less: @{} stylus: {} (7)自定义函数： scss: 声明：@function funName($param:defaultValue){...}调用: funName($param:value) stylus: 声明：funName(param=defaultValue){...} 调用: funName(param:value) less: 暂无
(8)可用预算符： scss：+,-,*,/,%,>,>=,==,!=,<=,<, less：+,-,*,/,>,>=,=,=<,< stylus：[],!,~,+,-,**,*,/,%,...,..,>,>=,<,<=,==,!=,&&,||,?,:,=,:=,?=,+=,-=,*=,/=,%= (9)内置函数： scss：nth,join,append,map-get,map-merge less：round,ceil,floor,percentage,saturate,lighten,darken,fade,fadein,fadeout,spin,mix, stylus：round,ceil,floor,saturate,desaturate,saturation,light,lighten,lightness,darken,red,green,blue,alpha,hue,push,keys,values,typeof,unit,match,abs,min,max,even,add,sum,avg,join,hsla,rgba,invert,unquote,s,operate,length,warn,error,last,p,oppsite-position,image-size,add-property (10)关键字: scss:and,or,not
less:when,truth, stylus:is defined,in,is,not,is not,isnt,is a,and,or,if,unless, (11)避免编译： less：～'...' stylus：@css{...} (12)避免编译拓展,可用于解决有些样式经过编译拓展后被丢失的问题 less、scss: /*! autoprefixer: off*/ 不要扩展的样式: -webkit-box-orient:vertical; /*! autoprefixer: on*/ (13)避免编译引入文件 scss: 被引入文件名前加_,引入时不用加_,例：引入_colors.scss:@import 'colors' (14)指令： scss：@if,@else if,@else,@for,@each,@while,@-root,@debug,@warn,@extend-Only (15)继承 scss、stylus：@extend selector 注：不要在scss的css规则中使用后代选择器（比如.foo .bar）去继承css规则，这样生成css中的选择器的数量很快就会失控 (16)后缀 less: .less stylus: .styl scss: .scss (17)在vue-cli3中引入全局样式变量文件的方式 scss：在vue.config.js中添加如下配置
module.exports = {// ...css: {loaderOptions: {sass: {data: `@import "@/assets/styles/_variable.scss"; `}}}}
less：在命令行运行：vue add style-resources-loader，然后在vue.config.js中添加如下配置
module.exports = {pluginOptions: {'style-resources-loader': {preProcessor: 'less',patterns: [path.resolve(__dirname, './src/styles/_variable.less')//相对于vue.config.js文件的变量文件路径],},},}
三、总结 1.scss提供了属性嵌套功能，可以更进一步减少重复的样式代码，但其继承规则有限制是个缺点 2.less和stylus提供了更丰富的运算方法和内置函数 3.stylus的语法相对要更简洁些,也免去了重复的写{}和; 4.Sass和less有中文版官网，更便于学习
