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 [email protected] --save-dev
(2)安装sass

npm install [email protected] --save

1. vue中使用

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

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

mounted(){

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

},

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用@

你可能感兴趣的:(sass,scss,less)