简单体验一下scss重构我们的代码

开启AdminJS成长之旅！这是我参与「AdminJS日新计划 · 2 月更文挑战」的第 19 天，点击查看活动详情

引言

今天我们一起来学习一下如何使用Scss精简一下我们平时开发的css代码。

什么是Scss

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件，官方解释。

SCSS 语法使用 .scss 文件扩展名。除了极少部分的例外， 它是 CSS 的超集，也就是说 所有有效的 CSS 也同样都是有效的 SCSS 。 由于其与 CSS 的相似性，它是最容易上手的语法， 也是最流行的语法。

scss的优势

SCSS (Sass) 有以下几个主要优势：

• 可维护性：SCSS 允许使用变量、嵌套、混合、继承等特性，从而使样式表变得更加清晰、可读性增强。
• 更高效：SCSS 允许使用函数、循环等高级特性，使得样式定义更加高效。
• 更易扩展：SCSS 提供了组件化和模块化的技巧，可以更方便地扩展和维护代码。
• 更简单：SCSS 的语法比 CSS 更简洁易懂，允许编写更加简洁的样式表。
• 兼容性：SCSS 可以完全兼容 CSS，可以无缝地使用

再来看一下scss和其他对比

先看个使用原生写css的场景

想象一下下面的场景，我们需要定义三个方块，分别是红色，蓝色，和黄色，大小并不相同，同时每个方块鼠标移过后都会有一个暗淡的效果，我们应该如何去书写呢？

先来看一下原生的css

<template>
  <div class="class_A">

  </div>
  <div class="class_B">

  </div>
  <div class="class_C">

  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.class_A {
  margin: 10px;
  width: 100px;
  height: 60px;
  background-color: red;
}
.class_A:hover {
  opacity: 0.6;
  transition: all 0.6s;
}

.class_B {
  margin: 10px;
  width: 80px;
  height: 48px;
  background-color: blue;
}
.class_B:hover {
  opacity: 0.6;
  transition: all 0.6s;
}

.class_C {
  margin: 10px;
  width: 60px;
  height: 36px;
  background-color: yellow;
}
.class_C:hover {
  opacity: 0.6;
  transition: all 0.6s;
}
</style>

三种方块不同大小，颜色，同时鼠标移动会有一个特效

我们来先介绍一下scss函数的用法

我们通过@mixin声明一个函数，然后通过@include来使用

@mixin fun($w) {
      // 定义了一个函数fun,接受一个参数
}

好了，我们正式开始重构我们的代码

<template>
  <div class="class_A">

  </div>
  <div class="class_B">

  </div>
  <div class="class_C">

  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
@mixin fun($w,$h,$bg) {
  margin: 10px;
  width: $w;
  height: $h;
  background-color: $bg;
  &:hover {
    opacity: 0.6;
    transition: all 0.6s;
  }
}
.class_A {
  @include fun(100px,60px,red);
}
.class_B {
  @include fun(80px,48px,blue);
}
.class_C {
  @include fun(60px,36px,yellow);
}
</style>

同样的效果，更少的代码，更优雅的写法，更简洁的代码风格，更高的可读性和可维护性。

看下效果还是一样的。不过代码高级，优雅了很多

而在很多耦合度更高的情况下，这种写法能更大的提升代码的可维护性和可读性。

最后

在工程化的项目中使用scss而不是传统的css，可以大幅度提高我们的开发效率，精简我们的代码量，提高了我们的代码的可读性，使其语法上更工整更优雅，同时后续无论修改或是排查或是协同开发上，都简单了很多。