学习 Sass

2025-06-08

学习 Sass

我们将介绍的内容：

  1. 什么是 sass？
  2. 为什么使用 sass 而不是普通 CSS？
  3. 如何使用 Sass？
  4. 特征。

开始吧！ 😄

什么是 sass？

Sass，全称Syntactically Awesome Style Sheets，是一个CSS 预处理器，它在普通 CSS 的基础上添加了变量、嵌套属性和混合宏等功能。我们稍后会探索所有这些功能以及更多内容。

但是等等，预处理器到底是什么？

预处理器是一种脚本语言，它允许您用一种语言编写代码，然后将代码编译/翻译成另一种语言。

在这种情况下，您编写 Sass 代码，然后将其编译为普通 CSS，然后在您的网站中使用编译后的 CSS，而不是Sass 代码。

你可能会问，为什么要费心去做这件事？这就引出了下一个问题……

为什么要使用 sass 而不是普通的 css？

原因很简单，功能更多。Sass 让你能够使用 CSS 的所有功能，并添加一些其他很棒的功能，这些功能有时会让你的工作更轻松，帮助你编写 DRY 代码，并使你的应用程序更具可扩展性和更易于维护。

如何使用 Sass？

由于 sass 是一个预处理器，你需要安装一个sass 编译器，它会读取你的 sass 文件，将其编译为 CSS，并将 CSS 写入 CSS 文件。你可以通过在文本编辑器中安装扩展程序（例如 vscode 的Live Sass Compiler）或安装Sass npm 包来实现这一点。

句法

有两种编写 sass 代码的方法，每种方法都有自己的文件扩展名。一个是.sass，另一个是.scss。

让我们来探索一下……

或“缩进语法”.sass写成如下：

nav
    width: 100%
    padding: 10px
    border: 1px solid

没有分号或括号，而是使用缩进。

另一个是，.scss它的写法如下：

nav {
  width: 100%;
  padding: 10px;
  border: 1px solid;
}

有了这个语法，您会感到非常熟悉，因为它与您编写 CSS 的方式非常相似。

这种.css方式更为常用，我们将对其进行探索。

以下所有内容也适用，.sass但只是有上述区别。😊

特征

现在让我们了解一下 sass 最常用的功能。

变量：

变量只是键值对，您可以声明一次，然后在样式中的任何位置应用它们。

它们可以帮助您保持一致性、编写干代码、更轻松地扩展和维护您的样式。

在 sass 中，通过\$后跟name:value来声明变量

例子：

// Declaration
$primary-color: #afef9f;
$secondary-color: #aaa;
$accent-color: #efee7f;

// Usage
nav {
  background-color: $primary-color;
  box-shadow: 10px 10px 23px -9px $secondary-color;
}

.btn {
  background-color: $accent-color;
}

现在，如果您决定使用不同的颜色，则不必逐个更改颜色，只需更改变量的值，更改将应用​​于您应用变量的任何地方。

嵌套：

通过嵌套，您可以将许多 CSS 选择器嵌套在一起，让我们看一个例子...

例子：

nav {
  width: 100%; // Will be applied to all nav elements

  .logo {
    height: 30px; // Will be applied to any .logo class in a nav element
  }

  ul {
    margin: 10px; // Will be applied to any ul element in a nav element

    li {
      font-size: 14px; // Will be applied to li in a ul in a nav
    }
  }
}

输出：

nav {
  width: 100%;
}

nav .logo {
  height: 30px;
}

nav ul {
  margin: 10px;
}

nav ul li {
  font-size: 14px;
}

您还可以使用伪选择器，例如:hover符号& ，如下所示：

nav {
  width: 100%;

  .logo {
    height: 30px;

    &:hover {
      // Whatever you put in here will be applied when you hover on the logo
    }
  }
}

另外，您可以使用&后跟任何名称，sass 将像这样连接它们：

.logo {
  height: 30px;

  &_small {
    height: 20px; // Will be added to .logo_small
  }
}

输出：

.logo {
  height: 30px;
}

.logo_small {
  height: 20px;
}

此功能允许您编写更少的代码并使您的样式更有条理且更易于分组。

进口：

导入允许您将 scss 代码分离到其他 .scss 文件中，然后将它们导入到任何其他 .scss 文件中，并且它们将应用于该文件。

假设您有一个 .scss 文件，其中包含一些变量和一些标题样式，如下所示：

索引.scss

$primary-color: #e32453;
$secondary-color: #fff91f;
$white-color: #eee;
$black-color: #002222;

header {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

您可以将它们分别放在单独的文件中，然后将它们导入到单个文件中，可重复使用的 scss 文件或“Partials”的命名约定是在名称前添加“_”。

我们将这个文件分成两部分：

_variables.scss

$primary-color: #e32453;
$secondary-color: #fff91f;
$white-color: #eee;
$black-color: #002222;

_header.scss

header {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

现在我们可以通过在@import后面加上我们要导入的文件的路径来将这两个文件导入到index.scss中：

索引.scss

@import "./header";
@import "./variables";

请注意，我们没有包含“_”或“.scss”扩展名，因为 sass 已经知道这些文件是部分文件。

这将应用index.scss中的_header.scss和_variables.scss中的任何内容。

混合：

Mixins 允许您拥有可以接受参数的代码片段，每个 mixin 都有一个名称并包含一些可以在其他选择器中重复使用的样式。

声明 mixin 的方式是：@mixin name { ... }或@mixin name(arguments..) { ... }，然后使用@include name() 来使用它。

让我们探讨一个例子。

示例：不带参数

@mixin centerAlign {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header {
  @include centerAlign(); // Will add all the properties in centerAlign

  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;
}

示例：带参数

@mixin centerAlign($direction) {
  display: flex;
  flex-direction: $direction;
  justify-content: center;
  align-items: center;
}

.header {
  @include centerAlign(row); // Will set flex-direction to row

  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;
}

.header_second {
  @include centerAlign(column); // Will set flex-direction to column

  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;
}

如果您想添加代码，您还可以使用@content ...

示例：使用@content

@mixin custom($screen) {
  @media (max-width: $screen+"px") {
    @content; // the content you add will be placed here
  }
}

.header {
  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;

  @include custom(700) {
    font-size: 20px; // will decrease your font-size when you hit 700px screen width and down
  }
}

输出：

.header {
  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;
}

@media (max-width: 700px) {
  .header {
    font-size: 20px;
  }
}

扩展/继承

您可以通过编写@extend来从另一个地方继承属性，后跟您想要继承的内容，如下所示：

例子：

.item {
  margin: 20px 10px;
  padding: 10px 8px;
  font-size: 12px;
}

ul {
  li {
    @extend .item; // Will inherit all the properties in .item

    font-weight: 300;
    line-height: 10px;
  }
}

运算符

我们要探索的最后一个常用功能是数学运算符。使用 sass 时，你可以使用基本的数学运算符，例如：+ 、 - 、 * 、 / 和 %。

让我们看看它们的实际效果...

例子：

.item {
  margin: 20px % 3; // The remainder of how many times 3 can go into 20
  font-size: 6px * 3;
  width: 100% - 20%;
}

输出：

.item {
  margin: 2px;
  font-size: 18px;
  width: 80%;
}

现在你已经熟悉了 SASS 是什么、如何使用以及所有常用的功能。想要了解更多信息，请访问SASS 官方文档。

学到了新东西吗？

与您认为也可以从中受益的人分享这篇文章，并考虑关注我们，以便在我们每次发布新文章时获得通知。😊

祝你有美好的一天！ 😄

鏂囩珷鏉ユ簮锛�https://dev.to/codepanda/learn-sass-4k4i
Devto 翻译
PREV
使用 Zod 和 TypeScript：前端开发人员指南
NEXT
Webpack 学院 #6：拆分开发和生产模式的配置