【css-task11】如何使用sass?

分享人：金俊

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

为何选择sass？

忽略其他特性，Sass 对自己的定位首先是一个预处理器。其最主要的竞争对手包括 Less，一个基于 NodeJS 的预处理器，因著名 CSS 框架 Bootstrap（在 v4 版本之前）的使用而声名鹊起,现在其也已经使用Sass。此外还有 Stylus，该预处理器对编写形式无所限制，学习难度稍高。 为什么选择 Sass 胜过其他预处理器？，这始终是一个待解决的问题。

2.知识剖析

为什么需要一个样式指南

一个样式指南并不是一份便于阅读并使代码处于理想状态的文档。
它在一个项目的生命周期中是一份关键文档，描述了编写代码的方式和采用这样方式的原因。
它可能在小项目中显得有些矫枉过正，但却能在保持代码库整洁，提高可扩展性和可维护性上提供诸多便利。
不用多说相信你也可以理解，参与项目的开发者越多，代码样式指南就越显的必要。
与之相同，项目的规模越大，代码样式指南也会越加重要。

样式指南（注意不是视觉风格指南）用于团队是一个很有价值工具：
长时间内便于创建和维护项目
便于不同能力的和专业的开发使用
便于任何时间加入团队的不同开发人员
便于新员工培训
便于开发人员创建代码库

核心原则

整个样式指南中传授的，那就是：Sass 以简为美，简约至上。
同时，CSS 是一门简单的语言，那么 Sass 在书写常规 CSS 的时候就不应该更复杂。
KISS principle (Keep It Simple Stupid) 在这里是一个核心原则，甚至在有些情况下要优先于DRY principle (Don’t Repeat Yourself)。
有时候，一点点重复可以更好的保持代码的可维护性，而不是建立一个头重脚轻、臃肿复杂、不可维护的系统。
实用胜过完美。有些时候，你可能会发现自己违背了这里所描述的规则。如果感觉自己的方式有道理，那就继续。

语法格式

当几个开发者在同一项目中编写 CSS 时，迟早会陷入各自为政的境地。
编码样式指南通过规范统一的样式，不仅防止了这种混乱现象，也减轻了阅读和维护代码的难度。
概括地说，我们希望做到（受 CSS Guidelines 所启发）：
使用两个空格代表缩进，而不是使用tab键；
理想上，每行保持为80个字符宽度；
正确书写多行CSS规则；
有意义的使用空格。

字符串

字符串在 CSS 和 SCSS 中都占有重要地位。大多数的 CSS 值不是长度就是标识符，所以遵循固定的编程规范处理 Sass 中的字符串是非常重要的一项工作。 编码 为了避免潜在的字符编码问题，强力建议在入口文件中通过 @charset 指令使用 UTF-8 编码格式。 请确保该指令是文件的第一条语句，并排除其他字符编码声明。 @charset 'utf-8';

数字

数字 在 Sass 中，数字类型包括了长度、持续时间、频率、角度以及无单位数值等等。Sass 允许在运行中计算这些度量值。 零值 当数字小于 1 时，应该在小数点前写出 0. 永远不要显示小数尾部的 0。

// Yep
.foo {
  padding: 2em;
  opacity: 0.5;
}

// Nope
.foo {
  padding: 2.0em;
  opacity: .5;
}
单位
当定义长度时，0 后面不需要加单位。

// Yep
$length: 0;

// Nope
$length: 0em;
						

计算

最高级运算应该始终被包裹在括号中。这么做不仅是为了提高可读性，也是为了防止一些 Sass 强制要求对括号内内容计算的极端情况。

// Yep
.foo {
  width: (100% / 3);
}

// Nope
.foo {
  width: 100% / 3;
}

颜色

颜色在 CSS 中占有重要地位。当涉及到操纵色彩时，Sass 通过提供少数的函数功能，最终成为了极具价值的助手。 颜色格式 为了尽可能简单地使用颜色，我建议颜色格式要按照以下顺序排列： HSL 值; RGB 值; 十六进制（使用小写并尽可能简写）

注释

理想上，任何 CSS 规则集之前都应该使用 C 风格注释来解释 CSS 块的核心。这个注释也要记录对规则集特定部分编号的解释。比如：

/**
 * Helper class to truncate and add ellipsis to a string too long for it to fit
 * on a single line.
 * 1. Prevent content from wrapping, forcing it on a single line.
 * 2. Add ellipsis at the end of the line.
 */
.ellipsis {
  white-space: nowrap; /* 1 */
  text-overflow: ellipsis; /* 2 */
  overflow: hidden;
}

基本上，任何不能明显看出意义的地方都应该注释，但不要随处注释。记住不要注释太多，掌握尺度让每一处注释都有意义。 当注释 Sass 的一个特定部分时，应该使用 Sass 单行注释而不是 C 风格的注释块。这么做将不会输出注释。

3.常见问题

选择器嵌套
Sass 中一个正在被众多开发者滥用的功能，就是选择器嵌套。选择器嵌套为样式表作者提供了一个通过局部选择器的相互嵌套实现全局选择的方法。 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下选择器具体的表现效果。CSS 最终的表现效果往往不是浅显易懂的。 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

4.解决方案

为了防止此类情况，建议嵌套不要超过三层，我的意见比较激进，建议尽量避免使用嵌套。

例外:
首先，在最外层选择器中嵌套伪类和伪元素是被允许，也是受推荐的。

.foo {
  color: red;

  &:hover {
    color: green;
  }

  &::before {
    content: 'pseudo-element';
  }
}

使用选择器嵌套选择伪类和伪元素不仅仅有道理的（因为它的处理功能与选择器紧密相关），而且有助于保持总体的一致性。