sass 简介

vue-cli3 项目中使用 sass

• 安装依赖

npm install node-sass --save-dev
npm install sass-loader --save-dev

• 局部引入外部 scss

<style lang="scss" scoped>
  @import "../../common/scss/base";
  .top {
    color: $myRed;
  }
</style>

• 全局引入外部 scss

全局导入 : 在 main.js 中引入 sass 文件；即：import "./commonon/base.scss";

less 和 sass 的区别

1. 实现方式不同

   Less 是基于 JavaScript，是在客户端处理的。

   Sass 是基于 Ruby 的，是在服务器端处理的，以前是 Ruby，现在是 Dart-Sass 或 Node-Sass。

2. 变量符不同

Less 用@，Sass 用$。

3. 输出设置不同

Less 没有输出设置，Sass 提供 4 中输出选项：nested, compact, compressed 和 expanded。

输出样式的风格可以有四种选择，默认为 nested

• nested：嵌套缩进的 css 代码
• expanded：展开的多行 css 代码
• compact：简洁格式的 css 代码
• compressed：压缩后的 css 代码

4. Sass 支持条件语句，可以使用 if{}else{},for{}循环等等。而 Less 不支持。

5. 引用外部 CSS 文件不同

scss@import 引用的外部文件如果不想编译时多生成同名的.css 文件，命名必须以开头, 文件名如果以下划线开头的话，Sass 会认为该文件是一个引用文件，不会将其编译为同名 css 文件.

Less 引用外部文件和 css 中的@import 没什么差异。