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

本文概述

什么是Sass, 为什么要使用它？
为什么需要CSS样式指南
时尚指南
总结

编写一致且易读的CSS可以很好地进行扩展是一个具有挑战性的过程。尤其是当样式表越来越大, 越来越复杂且难以维护时。开发人员可以用来编写更好的CSS的工具之一是预处理器。预处理程序是一种程序, 它接受一种类型的数据并将其转换为另一种类型的数据, 在我们的情况下, CSS预处理程序是被编译为CSS的预处理语言。前端开发人员推荐和使用许多CSS预处理器, 但是在本文中, 我们将重点介绍Sass。让我们看看Sass所提供的功能, 为什么它比其他CSS预处理器更可取, 以及如何以最佳方式开始使用它。

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

对于不了解Sass的人来说, 最好的起点是访问Sass官方网页。 Sass是Synthematically Awesome StyleSheets的首字母缩写, 是CSS的扩展, 为基本语言增添了力量和优雅。

使用Sass(语法上很棒的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操作。
避免！重要。如果你需要使用此规则, 则意味着你的CSS规则总体上有问题, 并且CSS的结构不正确。具有许多重要规则的CSS容易被滥用, 并且最终变得混乱且难以维护CSS代码。
不要使用子选择器。此规则与ID具有相同的推理。子选择器过于具体, 与你的HTML结构紧密结合在一起。

如果你在CSS中大量使用！important, 则说明这样做是错误的。

鸣叫

保持无礼的规则

保持代码的一致性很重要。规则之一是你需要保持规则的顺序。这样, 其他开发人员可以更深入地阅读代码, 并且花更少的时间查找代码。这是建议的订单：

首先使用@extend。首先让你知道该类从其他地方继承了规则。
接下来使用@include。将mixin和函数包含在顶部很高兴, 并且还可以让你知道要覆盖的内容(如果需要)。
现在, 你可以编写常规的CSS类或元素规则。
将嵌套的伪类和伪元素放置在任何其他元素之前。
最后, 像下面的示例一样编写其他嵌套的选择器：

.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的可扩展和模块化架构*