StarBlog博客Vue前端开发笔记：(2)SASS与SCSS

前言

本项目需要使用 SCSS 来编写页面样式。

Sass （Syntactically Awesome Stylesheets）是一个 css 预处理器，而 SCSS 是 Sass 的一种语法格式，它完全兼容 CSS，同时扩展了 CSS 的功能，使得样式编写更加高效、灵活和模块化。

对于初学者，SCSS 是完全和 CSS 兼容的，这意味着几乎为零的学习曲线。SCSS 语法即是：它只是加了一些功能的 CSS。当你和没经验的开发者一起工作时这很重要：他们可以很快开始编码而不需要首先去学习 Sass。

此外，SCSS 还是 易于阅读 的，因为它是有语义的，而不是用符号表示。当你读到 @mixin，你就会知道这是一个 mixin 声明；当你看到 @include ，你就是在引用一个 mixin。他并没有用任何缩写，当你大声读出来时所有的都很明了。

还有，现在几乎所有 Sass 的工具，插件和 demo 都是基于 SCSS 语法来开发的。随着时间过去，SCSS 会变成大家首选的选择。比如，你现在很难找到一个 Sass 缩进语法的高亮插件，通常都只有 SCSS 的可以用。

本文以编写 404 页面为例，介绍 SCSS 的使用。

关于 SCSS

SCSS 相比起 CSS 的优势

• 模块化：通过变量、嵌套和导入（@import 或 @use）组织样式文件。
• 可维护性：减少重复代码，便于维护和修改。
• 兼容性：SCSS 文件可以完全兼容 CSS 文件，允许渐进式过渡。
• 功能强大：支持逻辑判断（@if）、循环（@for）、和函数（@function）等功能。

相关资源

• SASS 的官网: https://sass-lang.com/

• 中文文档: https://www.sass.hk/docs/

SCSS 的主要功能

变量（Variables）

可以使用变量存储颜色、字体大小等值，方便复用和管理。

// SCSS
$primary-color: #3498db;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}

转译后的 CSS:

body {
  color: #3498db;
  font-size: 16px;
}

嵌套（Nesting）

SCSS 支持嵌套语法，使样式层级结构更清晰，与 HTML 结构更接近。

// SCSS
nav {
  ul {
    margin: 0;
    li {
      display: inline-block;
      a {
        text-decoration: none;
        color: $primary-color;
      }
    }
  }
}

转译后的 CSS:

nav ul {
  margin: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  text-decoration: none;
  color: #3498db;
}

混合（Mixins）

类似于函数，可以定义一段通用样式，并在多个地方调用。

// SCSS
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 100vh;
}

转译后的 CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

继承（Inheritance）

使用 @extend 来复用已有的样式。

// SCSS
.btn {
  padding: 10px 20px;
  border-radius: 5px;
}

.btn-primary {
  @extend .btn;
  background-color: $primary-color;
  color: white;
}

转译后的 CSS:

.btn {
  padding: 10px 20px;
  border-radius: 5px;
}
.btn-primary {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #3498db;
  color: white;
}

运算（Operations）

SCSS 支持基本的数学运算，例如加减乘除。

// SCSS
$base-padding: 10px;

.box {
  padding: $base-padding * 2;
  margin: $base-padding / 2;
}

转译后的 CSS:

.box {
  padding: 20px;
  margin: 5px;
}

安装

多年来 node-sass 一直是 JavaScript 社区里的主流选择，它实际上只是 libsass 在 node 环境下的一个 wrapper， 编译 sass 文件的实际工作是 libsass 完成的。

在使用 node-sass 过程中遇到的很多问题实际上也是 libsass 引发的，libsass 是用 C/C++ 实现的，常见的问题是，在安装 node-sass 的过程中经常会出现安装失败的情况，又或者切换了 Node.js 版本发现 node-sass 需要重新安装才能用，如果你在 docker 中安装 node-sass 还会遇到由于缺少各种依赖导致 node-sass build 失败的情况，又或者在国内由于网络原因导致 node-sass 需要的二进制文件下载不下来而 build 失败。

现在，sass 官方已经使用 dart-sass 作为 sass 的主要实现：

Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It’s fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows.

所以安装命令如下：

yarn add sass --dev
yarn add sass-loader@7.1.0 --dev

注意 Vue2 使用的 webpack 版本是 3.6.0，所以这里的 sass-loader 必须使用 7.1.0 版本

（我被 TypeError: this.getOptions is not a function 这个报错折腾了大半天才搞定）

配置

编辑 build/webpack.base.conf.js 文件下 module 里的 rules 标签，添加以下配置

{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
}

使用方法

有 Webpack 的用法

本项目是基于 Vue 的 SPA（单页应用），编写代码之后经过 webpack 打包成 HTML、CSS、JavaScript，前面的步骤也配置好了 SASS，可以直接在 .vue 文件里写 SCSS。

在页面代码 style 标签中把 lang 设置成 scss 即可。

<style scoped lang="scss">

</style>

这里我改了一下 src/views/404.vue 页面

<template>
  <div class="site-wrapper site-page--not-found">
    <div class="site-content__wrapper">
      <div class="site-content">
        <h2 class="not-found-title">404</h2>
        <p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p>
        <el-button @click="$router.go(-1)">返回上一页</el-button>
        <el-button type="primary" class="not-found-btn-gohome" @click="$router.push('/')">进入首页</el-button>
      </div>
    </div>
  </div>
</template>

样式代码如下

.site-wrapper.site-page--not-found {
  position: absolute;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;

  .site-content__wrapper {
    padding: 0;
    margin: 0;
    background-color: #fff;
  }

  .site-content {
    position: fixed;
    top: 15%;
    left: 50%;
    z-index: 2;
    padding: 30px;
    text-align: center;
    transform: translate(-50%, 0);
  }

  .not-found-title {
    margin: 20px 0 15px;
    font-size: 8em;
    font-weight: 500;
    color: rgb(55, 71, 79);
  }

  .not-found-desc {
    margin: 0 0 30px;
    font-size: 26px;
    text-transform: uppercase;
    color: rgb(118, 131, 143);

    > em {
      font-style: normal;
      color: #ee8145;
    }
  }

  .not-found-btn-gohome {
    margin-left: 30px;
  }
}

改完之后的页面效果

不错，可以收工了~

没有 Webpack 的用法

如果想单独使用 SCSS，可以直接调用 SASS 编译：

sass styles.scss styles.css

然后在 HTML 里引入

<link rel="stylesheet" href="styles.css">

参考资料

• Sass 与 SCSS 是什么关系？ - https://segmentfault.com/a/1190000005646206
• VueCli3 项目 node-sass 切换为 dart-sass - https://segmentfault.com/a/1190000039801096
• VueCli2 项目 node-sass 切换为 dart-sass - https://juejin.cn/post/6844903842945957896