SASS 初学者指南

SASS 初学者指南

SASS 初学者指南

说实话，写 CSS 代码很乱，尤其是检查别人的代码的时候。我发现 SASS 可以解决这个问题。它能帮你写出干净、易读的代码。

让我们开始吧。让我们创建一个简单的 HTML，它包含嵌套的 div、hover、focus、repeated CSS 属性，这些都是我们日常生活中常见的标准 HTML。

理解为什么我们使用parent1__link1类非常重要。它是 BEM（块元素修饰符）方法的一部分，其中 **parent1** 是块，**link1** 是元素。BEM 遵循**简单**的规则来命名和组织 CSS，并为项目中的每个人提供一种声明式语法，以便他们能够保持一致。您可以在这里
阅读相关内容。

HTML 标记示例

变量

我们先从写页眉的 CSS 开始吧。很简单，就是背景颜色和颜色属性。

标题类的 CSS

在这里，借助 SASS，我们可以将**颜色代码更改为变量* ，以便重复使用。因此，让我们使用 * $（在 SASS 中创建变量非常重要）为颜色代码创建变量（您可以使用它来为颜色变量命名） 。 ** 我们新的标题 CSS 代码如下所示。我们还可以将变量用于许多内容，例如填充、边距、颜色，基本上任何您想要重复使用的内容。

使用变量来获取可重用的属性

导入

为了使 CSS 更加模块化，SASS 提供了导入功能。我们可以将所有颜色名称、混合宏和常用样式分别放在不同的文件中，然后导入它们。所以，让我们创建一个_color.scss文件。

注意 _color.scss 文件的名称。这被称为部分文件，这意味着该文件包含一些 CSS 代码片段，你可以将它们添加到其他 Sass 文件中。下划线表示该文件只是部分文件，不应生成 CSS 文件。

_color.scss 文件

我们可以在主 scss 文件中导入此文件。使用命令

@import'./_color.scss'

并继续以与上述相同的方式使用颜色变量。

嵌套

接下来我们跳转到** parent1*（请参阅上面的 HTML 标记）*及其子项。

问题陈述 1 ：为**parent1*和 * parent1__link1 **编写 CSS

对于这道题，我们将使用**& *来连接类 * parent1 ** 和parent1__link1。请参考下图（此处也要注意变量的使用）。

问题陈述 2 ：为元素编写**hover*和 * after ** 类

对于这个问题，我们将使用&将伪类和元素连接到parent1__link1 。

请注意：伪类使用&:连接，伪元素使用&::连接

伪类和伪链接的完整列表可在此处查看

在 SASS 中使用伪类

Mixins

如上所述，我们已经为父级 1 编写了 CSS。我们也将为父级 2 编写相同的 CSS。

包含 parent1 和 parent2 样式的完整 css 文件

正如我们在上面的文件中看到的，parent1 和 parent2 共享许多通用的 CSS 属性。我们可以使用 *MIXINS 使这段 CSS 更简洁、更易读。*Mixin 的工作原理如下：

我们使用@mixin关键字创建一个自定义通用样式，如下图所示。它包含 parent1 和 parent2 共有的所有属性。

混合父类的通用样式

接下来，我们将混合包含在我们的父样式中。

Mixins 的使用

这里，我为链接样式和父样式创建了 mixin 。它使代码更加简洁易读。

这是 SASS 入门的基础指南。当然，SASS 提供了丰富的功能，可以帮助您更轻松地编写 CSS。您可以在此处参考 SASS 的完整指南。