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/　

stylus：http://stylus-lang.com/　https://www.zhangxinxu.com/jq/stylus/

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,

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有中文版官网，更便于学习