sass、scss、less区别

Sass (Syntactically Awesome StyleSheets)，后缀名为.sass，是由ruby语言编写的一款css预处理语言

SCSS (Sassy CSS)，后缀名为 .scss。SCSS 是 Sass 3 引入新的语法，与原来的语法兼容，只是用{ }替代了原来的缩进。SCSS语法完全兼容 CSS3，并且继承了 Sass 的强大功能

Less 后缀名为 .less。与Sass类似，也是一款css预处理语言。与Sass不同的是，Less是基于Javascript，是在客户端处理的。Less 既可以在客户端上运行（支持IE 6+，Webkit，Firefox），也可以运行在 Node 服务端

使用

（1）安装node-sass 因为sass-loader依赖于node-sass，所以要安装node-sass

npm install node-sass@4.14.1 --save-dev
（2）安装sass

npm install sass-loader@8.0.2 --save

1. vue中使用

<style lang="scss" scoped> </style>

2. scss中使用vue定义的变量：关键在于mounted方法内为style添加属性。

<div> <div ref="testScss" class="test"> </div> </div>

data () { return { color: 'blue', }; },

mounted(){

if (this.$refs.testScss) { this.$refs.testScss.style.setProperty('--colorVal', this.color) }

},

<style lang='scss' scoped>
    .test{
        width: 200px;
        height: 200px;
        border: solid 1px black;
        background-color: var(--colorVal);
    }       
</style>

3. vue.config.js配置引用公共样式文件， 可直接引用变量

css: {

    loaderOptions: {

      // 给 sass-loader 传递选项

      sass: {

        // @/ 是 src/ 的别名

        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"

        additionalData: `@import "~@/_css/variables.sass";`

      },

      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效

      // 因为 `scss` 语法在内部也是由 sass-loader 处理的

      // 配置全局可用的样式文件
      // sass-loader v8-, 这个选项是 "data"
     // sass-loader v8中, 这个选项是 "prependData"
      // sass-loader v8+, 这个选项是 "additionalData"

      // 但是在配置 `prependData` 选项的时候

      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号

      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置

      scss: {

        additionalData: `@import "~@/_css/variables.scss";`      
      }

      // 给 less-loader 传递 Less.js 相关选项

    }

  },

不同

Sass功能较Less强大

　　　1、sass有变量和作用域

　　　2、sass有函数的概念

　　　3、进程控制

　　　　　条件、循环遍历、继承、引用

　　　4、数据结构

　　　　　数组、map

Sass和Less处理机制不一样

　　　前者是通过服务端处理的，后者是通过客户端处理，相比较之下前者解析会比后者快一点。

关于变量在Sass和Less中的唯一区别就是Sass用$，Less用@