Sass
英文原文：
Sass Style Guide
由于Sass的使用人数超出以往的任何时候，我们在怎样将其格式化的问题上需要多加思考。CSS样式指南（CSS style guides）是比较常见的，因此也许我们可以扩展他们，来覆盖Sass的各种选择。
这是些我一直比较倾向的想法。也许他们对你来说很实用，或者能够帮助你构想出你自己的想法。
使用你正常的CSS格式化原则/样式指南
这篇文章是关于针对Sass的东西的，但是作为它的一个基础，你应该使用任何好的CSS格式化指导原则，如果你已经准备好使用了它。如果你还没有这样做，这个样式指南综述（
roundup of style guides）也许会帮助你。它包括这样的东西：
- 保持一致的缩进
- 在冒号/括号之前/之后的空格上保持一致
- 每行一个选择器，每行一个样式
- 在一起列举相关的属性
- 为类名的命名制定一个计划
- 不要使用ID的#标识符
- 其他
首先列举 @extend(s)
.weather { @extends %module; ... }
要知道这样一个事实——这个类从别处继承了另外一整套的规则。
之后列举“正常”的样式
.weather { @extends %module; background: LightCyan; .. }
再后列举 @include(s)
.weather { @extends %module; background: LightCyan; @include transition(all 0.3s ease-out); ... }
这明显的将@extends和@includes区分开，同时组织了@includes以便方便阅读。你也许还会想要要求，将用户自定义的@includes和供应商提供的@includes区分开。
最后嵌套选择器
.weather { @extends %module; background: LightCyan; @include transition(all 0.3s ease);
> h3 { border-bottom: 1px solid white; @include transform(rotate(90deg)); } }
嵌套的东西后面什么也没有。而与上述相同的、包含嵌套选择器的顺序将被应用。
所有的供应商的前缀都用 @mixins
供应商前缀依赖于时间。由于浏览器随着时间流逝不断升级，对于前缀的需求将会大打折扣。你可以更新mixins（或者你所用的库将会更新）来体现这些变化。即使mixin最终变成了一个笑话，也没有关系。
唯一一次我不想用@mixin来当供应商前缀的时候，那时它及其专用，像它那样不大可能被标准化；因此，引入其他供应商前缀或者无前缀的版本，可能导致更大的害处。我在考虑像这样的“类Web工具的行堆积的内容缩放链”的东西。
最大嵌套：三层深度
.weather { .cities { li { // no more! } } }
可能的情况是，如果你比这个深度还要深，你就是在写一个蹩脚的选择器。这其中的别扭之处在于，它过分依赖于HTML结构（很脆弱），过于具体（太强大），而且复用性不强（没有用）。而且他已经到了难以理解的边缘。
如果你真的因为类这个东西对你来说太难了，而想要使用标签选择器，你可能想要把它变得非常具体，来避免意料之外的级联。甚至可能需要利用扩展，来改善从CSS角度看的复用性。
.weather
> h3 { @extend %line-under; } }
最大嵌套：50行
如果一个Sass的嵌套块比这还要长，就很有可能超出一个代码编辑器的屏幕区域，并且开始变得难以理解。嵌套的最终目的，是为了方便并辅助组织思维。如果背道而驰，就不要用它。
全局和具体部分的Sass文件只是目录
换句话说，他们没有直接包含样式。强迫你自己把所有的样式组织到内容部分中去。
先列举供应商/全局的依赖关系，然后编写依赖关系，再编写模型，最后编写具体的部分
因此，“目录”这东西放到一起就像这样：
/* Vendor Dependencies */ @import "compass"; /* Authored Dependencies */ @import "global/colors"; @import "global/mixins"; /* Patterns */ @import "global/tabs"; @import "global/modals"; /* Sections */ @import "global/header"; @import "global/footer";
依赖关系就像罗盘，颜色和导入的部分不产生任何对于CSS的编译，他们只是单纯的代码依赖关系。之后，列举模型是指更具体的“部分”，这些跟在后面的部分，能够在不产生任何冲突的情况下，把模型重写。
尽量有意义的拆分成更多的小文件
分成许多小文件并没有害处。在感觉好的前提下，将项目分成尽可能多的文件。我知道，我发现转到小文件并浏览他们，相对于更多/更大的文件件，要容易。
... @import "global/header/header/"; @import "global/header/logo/"; @import "global/header/dropdowns/"; @import "global/header/nav/"; @import "global/header/really-specific-thingy/";
我可能更愿意在global.scss中做这件事，而不是全局@import一个_header.scss文件，而这个文件又包含它自己的子引用。所有的自引用可能失去控制。
如果有太多的东西需要列举，Globbing也许会帮上忙。
Partials就叫_partial.scss
这是一种通用的命名惯例，它意味着这个文件不会被它自己编译。可能会有这样的依赖关系，使得被自己编译成为可能。从我个人来讲，我喜欢“真正”文件名中的下划线，喜欢_dropdown-menu.scss。
就此来讲，编译随行映射而扩展
看这里。这意味着开发工具能够确切的告诉你规则来自哪个文件、在哪行，即使它是一个导入的部分。
在部署中，压缩编译。
线上站点从来只能用压缩的CSS。
甚至不要提交.css文件
这可能会使得一些DevOps生效，但是.css文件不在你的存储中会更好。在部署的过程中发生编译。因此，你能从结果中看到的唯一一样东西，就是经过你良好格式化的、亲手编写的Sass文件。这也会使得其中差异变得有用。每个差异，都是一个对于版本控制机制提供的变化信息，进行的比较观察。差异对于压缩的CSS文件是没有用处的。
对注释慷慨一些
后悔在代码中添加注释，是很罕见的情况。它要么很有帮助，要么很容易忽略它。当编译压缩的代码时，注释将被去除，因此没有损耗。
.overlay { /* modals are 6000, saving messages are 5500, header is 2000 */ z-index: 5000; }
而说到注释，你可能想要对其进行标准化。Sass中的//符号是很好用的，特别是对于多行注释。因此，很容易对单行添加/去除注释。
将所有的常用数字和有意义的数字变量化
如果你发现，自己一遍又一遍的重复使用一个除了0和100%以外的数字，它就可能需要用一个变量来存储。因为它可能有意义，并且控制着一致性，如果能够便捷的对它进行调整，这将非常有用。
如果一个数字明显有很重要的意义，这也是一个将其变量化的实例。
$zHeader: 2000;
$zOverlay: 5000;
$zMessage: 5050;
.header { z-index: $zHeader; } .overlay { z-index: $zOverlay; } .message { z-index: $zMessage; }
这些数字可能存在于不同的文件中，通过@import相互依赖。这样，你就能从一个地方，跟踪成堆z-index属性。
将所有的颜色定义为变量
也许白色和黑色并不需要这样。实际情况是，一种颜色并不是一次性的，而即使你认为它是，一旦它存储到一个变量中，你应该就能在别处使用它。颜色变量可以经常被Sass的颜色函数所修改，例如lighten()和darken()，它们使得更新颜色更简单（在一个地方改变，整个颜色设计方案都跟着更新）。
将你的媒体查询嵌套并命名
能够在Sass中嵌套媒体查询，意味着：1）你不需要在其他地方重写选择器，否则很容易出错；2）你重写的规则十分清晰而明显，但而在CSS的结尾或者不同文件里就不适用了。
.sidebar { float: right; width: 33.33%; @include bp(mama-bear) { width: 25%; } }
更多内容，以及将他们命名的重要性。
最后的补救
在你的全局样式表中，最后@import一个_shame.scss文件。
@import "compass" ...
@import "shame"
如果你想进行一些简单的修补，你可以在这里做。之后当你有适合的时间时，你可以把这些调整转移到适当的结构/组织当中。更多相关信息看这里。
最终的输出结果由你决定
你没有说的，Sass就不做。因此，类似“Sass的输出太臃肿”这样的评论，就等同于“你写的代码太臃肿”。Sass最终输出的CSS，就像你没有使用Sass来写一样。
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。
2KB翻译工作遵照
CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务
