如何使用 SASS 编写可重用的 CSS

2025-06-08

如何使用 SASS 编写可重用的 CSS

作者：Obinna Ekwuno ✏️

Sass是一款 CSS 预处理器，正在成为前端工程师工具箱中不可或缺的一部分。Sass 之所以如此受欢迎，是因为它修复了一些 CSS 缺陷。

Bootstrap 4也运行于 Sass 之上。这意味着学习 Sass 对理解如何操作 Bootstrap 代码非常有帮助，而不是直接覆盖代码（这是大多数开发人员的习惯做法）。理解 Sass 能更好地理解源代码级别的工具。

在使用 CSS 时，我们经常在全局变量的世界中工作，并且可能会错误地设置元素的样式。

自定义 CSS（即使使用 CSS 变量）仍然非常冗余。CSS 的设计初衷并非为了应对当今复杂的架构，我们经常会遇到将一个样式表导入另一个样式表的问题，这可能会导致样式库过于庞大，如果没有合适的文档，可能无法理解。

TL; DR

在本文中，我们将重点讨论预处理器的重要性，并特别强调 SASS 及其组合规则的能力。使用 SASS 可以为现代 Web 组件的样式设计提供更合理的方法。

我们还将通过演示示例来了解为什么使用这些预处理器，展示如何将样式分解为更小的特定组件，而无需强迫用户下载大量不需要的 CSS 文件。

先决条件

在进一步讨论之前，本文假设以下内容：

LogRocket 免费试用横幅

入门

您可以通过多种方式将 Sass 添加到您的项目中，您可以在此处找到所有安装选项。为了本文的目的，我们将通过运行以下命令来使用npm ：

npm install -g sass
Enter fullscreen mode Exit fullscreen mode

CSS 有什么问题？

在学习 Web 开发基础知识时，我们会了解传统的 CSS，它涉及使用类或 ID 等标识符来处理和操作 HTML。

在使用 CSS 时，我们常常需要反复修改样式才能使其达到我们想要的效果。组织大型样式表确实非常费力。而控制类的作用域以避免样式设置出现意外，也几乎让人精疲力尽。

即使引入 CSS 变量来减少声明的重复，这个概念仍然存在一些问题，可以通过使用预处理器来解决。例如，变量名过长。

即使 CSS3 已经问世，我们仍然需要依赖一些技术（基本上是一些 hack）来设计用户界面。我们还会注意到，在编写 HTML 时，存在清晰的嵌套和视觉层次结构，而常规 CSS 则无法做到这一点。

让我们看看 CSS 中缺少的功能的“解决方案”。

什么是 CSS 预处理器？

这些基本上可以被认为是一个程序，它允许你从预处理器自身独特的语法生成 CSS。CSS 预处理器通常会添加一些纯 CSS 中不存在的功能，例如mixin、嵌套选择器、继承选择器。同时，它们还为我们提供了一种非常结构化的样式表编写方式。CSS 预处理器的示例包括LESS、stylus、Sass和PostCSS。如前所述，本文重点介绍 Sass 作为预处理器。

CSS预处理器

SASS 还是 SCSS？

;现在，如果您对 Sass 的概念还不熟悉，您可能会想，“如果 Sass 是预处理器，那么 SCSS 是什么？” 好吧，因为使用 Sass 时由于缺少分号和花括号而有点混乱{}，所以它使用制表符和空格来代替。

在 Sass 3 版本中，SCSS 语法被引入作为 Sass 的主要语法，它包含 CSS 的所有功能，但允许使用 Sass 的功能。两种语法在样式设置时都可以使用，在我看来，没有哪一种语法比另一种更好。SCSS 的必要性在于缩短 Sass 的学习周期，并降低 Sass 的实施难度，避免错误。

萨斯：

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color
Enter fullscreen mode Exit fullscreen mode

SCSS：

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
Enter fullscreen mode Exit fullscreen mode

在上面的代码示例中，我们注意到 Sass 和 SCSS 编写风格的区别。注意它们都用于$声明变量。

SCSS 中的概念

嵌套和作用域

在设置 HTML 文件的样式时，SCSS 允许你在样式表中使用与 HTML 相同的视觉层次结构，以便你能够以更易于理解的方式规划样式。例如，设置如下样式index.html：

<nav class = 'sidebar'>
  <ul>
    <li> <a> </a></li>
  </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

CSS：

nav ul {
  margin: 0;v
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

SCSS：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
Enter fullscreen mode Exit fullscreen mode

从上面的 CSS 代码示例中可以看出，我们能够推断出 HTML 文件的结构，同时保持实现的简洁性。这样做的另一个好处是，它有助于避免拼写错误，此外，您还可以看到，我们限定了一些规则的范围，使它们仅适用于nav.

后代样式规则适用于 SCSS，例如：

.container{
.left-area{
  ...
}
}
Enter fullscreen mode Exit fullscreen mode

这意味着所有具有 的容器类的后代class = "left-area"都将受到规则的影响。基本的 CSS 选择器仍然适用于 SCSS，例如：

直系后代 (>)

.container{
  > .left-area{
   ...
 }
}
Enter fullscreen mode Exit fullscreen mode

现在只有容器 div 的直接子类才会获得该样式。

父选择器（ & ）

如果我们想通过添加类来修改某个类，可以使用父选择器。它主要用于添加辅助样式会改变元素样式的情况。父选择器也能起到修饰符的作用。

.container{
  & .right-area{
   background-color : #0000
 }
}
Enter fullscreen mode Exit fullscreen mode

我们还可以使用父选择器将角色范围限定到另一个类，如下所示：

button{
  color:#349;
  .theme-dark &{
    color: #fff
}
}
Enter fullscreen mode Exit fullscreen mode

从代码示例中可以看出，由于父选择器的存在，颜色#fff仅适用于类。.theme-dark

变量

通常，在 CSS 中，我们会使用 来链接多个样式表，@import以便将另一个样式表引入主 CSS。这对用户意味着什么？这意味着必须下载额外的 CSS 文件。

如果有一种方法可以使用 SCSS 将所有这些输入解析到单个 CSS 文件中，那会怎样呢？CSS 中的变量概念源自 JavaScript 方法。

注意，@import在 SCSS 中，部分代码用于将部分代码导入到其他 SCSS 文件中，但不会生成 CSS 文件。它们在_名称前以 ' 表示。

使用 SCSS 变量

全局变量：顾名思义，这些变量可以在 CSS 块内访问。如果你熟悉 JavaScript 中的作用域，你就会理解全局变量。

SCSS 中的变量始终以美元符号开头$。

$color: #f002
.color{
  $text_color: #ddd;
  background-color: $color;
  color: $text_color;
  text-shadow:0 0 2px darken($text_color, 40%);
}
Enter fullscreen mode Exit fullscreen mode

从上面的代码中，我们注意到$text_color只能在代码块内访问。

Mixins

SCSS 的另一个很棒的功能是它能够将可重复使用的样式打包在一起，并允许根据需要导入到另一个样式块中，以减少代码冗余。

宣言

创建 mixin 非常简单，只需@mixin在样式块前添加一个，然后添加 mixin 名称，如下所示：

@mixin {insert name} {
     //write CSS code here
}
Enter fullscreen mode Exit fullscreen mode

用法

要在代码块中使用 Mixin，我们必须使用 ，@include后跟 mixin 的名称，然后加分号。这有助于在代码块中使用预定义的 mixin：

.nav {
   @include {mixin name}
}
Enter fullscreen mode Exit fullscreen mode

使用 mixin 的另一种方式是使用参数，就像 JavaScript 中的函数一样，我们可以声明一个全局变量并将其设置为 mixin 的参数：

@mixin text-color($color){
  background-color: $color;
  color: white;
}

//import 
.name{
  @include text-color(orange);
}
.background{
  @include text-color(white)
}
Enter fullscreen mode Exit fullscreen mode

现在想象一下，如果我们想要一个 mixin 的默认值，并且想在不同的代码块中更改或重新赋值这个值，我们会使用一些参数。为了演示这一点，我将重构前面的代码示例：

@mixin text-color($color : #fff){
  background-color: $color;
  color: white;
}

//import 
.name{
  @include text-color(orange);
}
.background{
  @include text-color($color: white)
}
Enter fullscreen mode Exit fullscreen mode

这段代码的作用是，它为 mixin 设置了一个默认颜色作为基础，但可以通过重新赋值来修改。我们也可以设置该值，null以便只使用 mixin 中需要的参数：

@mixin text-color($color : null){
  background-color: $color;
  color: #038;
}

//import 
.name{
  @include text-color();
}
.background{
  @include text-color(#fff)
}
Enter fullscreen mode Exit fullscreen mode

这样做的目的是使显示为空的值在@include输入中没有值，但默认显示其他值。

通过减速带：

@mixin text-color($color){
  color: $color;
  .extra{
  @content
  }
}

//import 
.name{
  @include text-color(#fff){
    color: blue;
  }
}
Enter fullscreen mode Exit fullscreen mode

代码块基本上允许我们通过设置父类的样式来保持样式简单，并且能够定义内部类。

值得注意的信息

  • Mixins 不会对 CSS 文件进行评估，它们被设计为被使用，因此在 SCSS 中，你通常会将它们视为部分
  • Mixins 前面不需要加点 (.)

功能

SCSS 中的函数是 SASS 功能的重要组成部分，它们允许您定义可在整个样式表中重复使用的复杂操作。SASS 内置了许多函数可以提供帮助。查看文档了解更多信息。

以下是您应该熟悉的一些函数的列表

我们还可以编写自己的 Sass 函数：

$width: 4px;
@function double($x){
  @return 2 * $x;
}
.thin-border{
  border-width: $width
}
.thick-border{
  broder-width:double($width)
}
Enter fullscreen mode Exit fullscreen mode

当使用正常宽度作为参数调用该函数时，上述函数只是将值加倍。

带有控制流的条件样式

@if这个功能非常棒，因为它允许我们使用和声明，根据另一种样式的值来切换特定样式@else。例如，根据不同的 font-size 值动态增加 line-height。

@mixin modify($size){
 font-size: $size;
 @if $size > 18{
 line-height: $size;
 }
}

//import 
.name{
 @include modify(24px)
 }
Enter fullscreen mode Exit fullscreen mode

需要注意的其他一些特点

  • 注释 – SCSS 中的多行注释在 CSS 中的显示方式相同，但内联注释会被移除。它们可用于字符串插值（了解 CSS 中实际显示的值）。
  • Sass 还带有@for迭代和控制流，可以与 mixins 和函数一起使用

结论

在本文中，我们尝试了解使用 SCSS 编写函数式 CSS 的基础知识，并学习了一些 Sass/SCSS 的通用原则。希望我们能够将这些实践运用到实际中，从而为我们的应用程序编写出更轻松、更优化的样式。祝您编码愉快！😄

编者注：觉得这篇文章有什么问题？您可以在这里找到正确版本。

插件：LogRocket，一个用于 Web 应用的 DVR

 
LogRocket 仪表板免费试用横幅
 
LogRocket是一款前端日志工具，可让您重播问题，就像它们发生在您自己的浏览器中一样。无需猜测错误发生的原因，也无需要求用户提供屏幕截图和日志转储，LogRocket 让您重播会话，快速了解问题所在。它可与任何应用程序完美兼容，不受框架限制，并且提供插件来记录来自 Redux、Vuex 和 @ngrx/store 的额外上下文。
 
除了记录 Redux 操作和状态外，LogRocket 还记录控制台日志、JavaScript 错误、堆栈跟踪、带有标头 + 正文的网络请求/响应、浏览器元数据以及自定义日志。它还会对 DOM 进行插桩，以记录页面上的 HTML 和 CSS，即使是最复杂的单页应用程序，也能重现像素完美的视频。
 
免费试用。

如何使用 SASS 编写可重用的 CSS一文首先出现在LogRocket 博客上。

鏂囩珷鏉ユ簮锛�https://dev.to/bnevilleoneill/how-to-write-reusable-css-with-sass-30k7
Devto 翻译
PREV
流行的 React Hook 库
NEXT
JavaScript 的工作原理：优化 V8 编译器以提高效率