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

scss/less/stylus的区别对比总结

相关推荐