scss/less/stylus的区别对比总结
一、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：http://lesscss.cn/ http://www.bootcss.com/p/lesscss/
scss和sass的区别请详见：http://sass.bootcss.com/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,
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有中文版官网，更便于学习
