Sass 样式指南：关于如何编写更好的 CSS 代码的 Sass 教程

已发表: 2022-03-11

编写可以很好地扩展的一致且可读的 CSS 是一个具有挑战性的过程。 尤其是当样式表变得更大、更复杂、更难维护时。 开发人员可以用来编写更好的 CSS 的工具之一是预处理器。 预处理器是一个程序，它获取一种类型的数据并将其转换为另一种类型的数据，在我们的例子中，CSS 预处理器是编译成​​ CSS 的预处理语言。 前端开发人员推荐和使用的 CSS 预处理器有很多，但在本文中，我们将重点介绍 Sass。 让我们看看 Sass 提供了什么，为什么它比其他 CSS 预处理器更受欢迎，以及如何以最佳方式开始使用它。

什么是 Sass，为什么要使用它？

对于那些不知道什么是 Sass 的人，最好的起点是访问 Sass 官方网页。 Sass 是 Syntactically Awesome StyleSheets 的首字母缩写，它是 CSS 的扩展，为基本语言增添了力量和优雅。

使用 Sass（Syntactically Awesome StyleSheets），你的 CSS 代码也会很棒。

使用 Sass（Syntactically Awesome StyleSheets），你的 CSS 代码也会很棒。
鸣叫

Sass 是一个具有许多强大功能的 CSS 预处理器。 最显着的特性是变量、扩展和混合。

变量存储可以在以后重用的信息，例如颜色或其他常用值。 扩展可帮助您创建允许规则继承的“类”。 Mixins，你可以把它想象成“函数”。 与其他预处理器相比，Sass 还具有其他一些令人惊叹的特性，例如使用逻辑语句（条件和循环）、自定义函数、与 Compas 等其他库的集成等等。 仅这些功能就可以帮助您和您的团队提高工作效率并最终编写出更好的 CSS。

为什么需要 CSS 样式指南

不幸的是，即使是预处理器也无法修复所有问题并帮助您编写好的 CSS 代码。 每个开发人员都面临的问题是当前的 Web 应用程序变得越来越大。 这就是为什么代码需要具有可扩展性和可读性，并且需要避免意大利面条式代码和未使用的代码行。 为避免上述问题，您的团队在日常工作中需要某种标准。 什么是意大利面条代码，它是如何发生的？ 意大利面条代码是糟糕、缓慢、重复和不可读代码的名称。 当一个团队在没有明确的指导方针或标准的情况下编写大型应用程序时，每个开发人员都会编写他需要的内容以及他想要的方式。 此外，当开发人员编写大量错误修复、修补程序和补丁时，他们倾向于编写能够解决问题的代码，但没有时间以最佳方式编写代码。 在这些情况下，通常会得到很多不再在应用程序的任何部分中使用的 CSS 行。 开发人员没有足够的时间来清理代码，他们被迫尽快发布修复程序。 另一个反复出现的情况是，为了快速修复损坏的东西，开发人员使用了很多!important ，这导致代码非常hacky，难以维护，导致很多意外行为，并且需要稍后重构。 如前所述，随着代码的增长，情况只会变得更糟。

本文的想法是分享编写更好的 Sass 的规则、技巧和最佳实践。 将这些 Sass 技巧和最佳实践组合在一起可以用作 Sass 风格指南。 本样式指南应帮助开发人员避免上述情况。 规则被分组为逻辑段以便于参考，但最终您应该全部采用并遵循它们。 或者至少，他们中的大多数。

时尚指南

本风格指南中的一组规则和最佳实践是基于与许多团队合作的经验而采用的。 其中一些来自试错，另一些则受到 BEM 等流行方法的启发。 对于某些规则，没有具体的原因以及如何设置它们。 有时以过去的经验作为唯一的理由就足够了。 例如，为了确保代码可读，所有开发人员都以相同的方式编写代码是很重要的，因此存在括号之间不包含空格的规则。 我们可以争论是否最好在括号之间包含空格。 如果您认为括号之间有空格会更好看，请根据您的喜好调整此样式指南和规则。 最后，风格指南的主要目标是定义规则，使开发过程更加规范。

样式指南的主要目标是定义规则，并使开发过程更加标准。

样式指南的主要目标是定义规则，并使开发过程更加标准。
鸣叫

一般 CSS 规则

应始终遵守一般规则。 他们主要关注如何格式化 Sass 代码以带来代码的一致性和可读性：

  • 对于缩进，使用空格而不是制表符。 最佳做法是使用 2 个空格。 您可以使用此选项运行自己的神圣战争，您可以定义自己的规则并使用制表符、空格或任何最适合您的方式。 重要的是定义一个规则并在保持一致的同时遵循该规则。
  • 在每个语句之间包含一个空行。 这使得代码更具人类可读性，并且代码是由人类编写的，对吧？
  • 每行使用一个选择器，如下所示：
 selector1, selector2 { }
  • 不要在括号之间包含空格。
 selector { @include mixin1($size: 4, $color: red); }
  • 使用单引号将字符串和 URL 括起来：
 selector { font-family: 'Roboto', serif; }
  • 以分号结束所有规则，之前不带空格：
 selector { margin: 10px; }

选择器规则

接下来，我们将遵循一组在处理选择器时使用的规则：

  • 避免使用 ID 选择器。 ID 过于具体，主要用于 JavaScript 操作。
  • 避免!important 。 如果您需要使用此规则，则意味着您的 CSS 规则总体上存在问题，并且您的 CSS 结构不合理。 具有许多!important规则的 CSS 很容易被滥用，最终导致混乱且难以维护的 CSS 代码。
  • 不要使用子选择器。 此规则与 ID 规则具有相同的推理。 子选择器过于具体，并且与您的 HTML 结构紧密耦合。

如果您在 CSS 中大量使用 !important，那么您做错了。

如果您在 CSS 中大量使用 !important，那么您做错了。
鸣叫

保持你的 Sass 规则井井有条

保持代码的一致性很重要。 规则之一是您需要保持规则的顺序。 通过这种方式，其他开发人员可以更深入地阅读代码，并且将花费更少的时间来寻找他们的方式。 这是建议的顺序：

  1. 首先使用@extend 。 这首先让您知道这个类从其他地方继承规则。
  2. 接下来使用@include 。 将你的 mixins 和函数包含在顶部是很好的，并且还可以让你知道你将覆盖什么（如果需要）。
  3. 现在您可以编写常规的 CSS 类或元素规则。
  4. 将嵌套的伪类和伪元素放在任何其他元素之前。
  5. 最后，编写其他嵌套选择器，如下例所示：
 .homepage { @extend page; @include border-radius(5px); margin-left: 5px; &:after{ content: ''; } a { } ul { } }

一些命名约定

样式书的命名约定部分基于在开发人员中流行的两个现有的 BEM 和 SMACSS 命名约定。 BEM 代表块、元素、修改器。 它由 YANDEX 团队开发，BEM 背后的想法是帮助开发人员了解项目中 HTML 和 CSS 之间的关系。 另一方面，SMACSS 代表 CSS 的可扩展和模块化架构。 它是构建 CSS 以实现可维护性的指南。

受它们启发，我们的命名约定规则如下：

  • 为每种类型的元素使用前缀。 为您的块添加前缀，例如：布局 ( l- )、模块 ( m- ) 和状态 ( is- )。
  • 每个块的子元素使用两个下划线：
 .m-tab__icon {}
  • 为每个块使用两个破折号作为修饰符：
 .m-tab--borderless {}

变量

使用变量。 从颜色等更通用和全局变量开始，并为它们创建一个单独的文件_colors.scss 。 如果您注意到您在样式表上多次重复某个值，请为该值创建一个新变量。 请干燥。 当您想更改该值以及仅需要在一个地方更改它时，您将不胜感激。

此外，使用连字符来命名变量：

 $red : #f44336; $secondary-red :#ebccd1;

媒体查询

使用 Sass，您可以将媒体查询编写为元素查询。 大多数开发人员在单独的文件中或在我们的规则底部编写媒体查询，但不建议这样做。 使用 Sass，您可以通过嵌套媒体查询来编写类似以下示例的内容：

 // ScSS .m-block { &:after { @include breakpoint(tablet){ content: ''; width: 100%; } } }

这会生成一个这样的 CSS：

 // Generated CSS @media screen and (min-width: 767px) { .m-block:after { content: ''; width: 100%; } }

这个嵌套的媒体查询规则让您可以非常清楚地知道您要覆盖哪些规则，正如您在使用命名媒体查询的 Sass 代码段中看到的那样。

要创建命名媒体查询，请像这样创建您的 mixin：

 @mixin breakpoint($point) { @if $point == tablet { @media (min-width: 768px) and (max-width: 1024px) { @content; } } @else if $point == phone { @media (max-width: 767px) { @content; } } @else if $point == desktop { @media (min-width: 1025px) { @content; } } }

您可以在以下文章中阅读有关命名媒体查询的更多信息：命名媒体查询和使用 Sass 编写更好的媒体查询。

其他注意事项

最后，您还应牢记并遵循以下一些其他注意事项：

  • 永远不要写供应商前缀。 改用自动前缀。
  • 在嵌套规则中使用最多三层深度。 嵌套级别超过三个，代码将难以阅读，也许你正在编写一个糟糕的选择器。 最后，您正在编写 CSS 代码以与您的 HTML 相结合。
 .class1 { .class2 { li { //last rules } } }
  • 不要编写超过 50 行的嵌套代码：或者更好的是，不要编写超过 X 行的嵌套代码。 设置您自己的 X，但 50 看起来是个不错的限制。 如果您通过了该限制，则代码块可能不适合您的文本编辑器窗口。
  • 编写一个主文件，您将在其中导入所有块、部分和配置。
  • 首先导入供应商和全局依赖项，然后是编写的依赖项，然后是布局、模式，最后是部件和块。 这对于避免混合导入和覆盖规则很重要，因为我们无法管理供应商和全局规则。
  • 不要害羞，并在尽可能多的文件中破坏您的代码。

结论

这个风格指南背后的想法是给你一些关于如何改进你编写 Sass 代码方式的建议。 请记住，即使您不使用 Sass，如果您使用 Vanilla CSS 或其他预处理器，本样式指南中提供的提示和规则也适用并建议遵循。 同样，如果您不同意任何规则，请更改规则以适应您的思维方式。 最后，由您和您的团队决定是否调整此样式指南、使用其他样式指南或创建一个全新的指南。 只需定义指南，然后开始编写很棒的代码。

相关： *探索 SMACSS：CSS 的可扩展和模块化架构*