组织Sass文件

本文由若强根据TIM SMITH的《Organize that Sass!》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://alistapart.com/blog/post/organize-that-sass，以及作者相关信息

——作者：TIM SMITH

——译者：若强

使用Sass的美妙之一就是：它能够很轻易地让你组织你的代码。在过去，把不同的css文件导入到某一个css文件中是一个不怎么好的方法，因为这样会增加更多的http请求。然而使用Sass，它可以允许你用一种存在逻辑的方式把不同的模块的样式文件分解出来。

什么是局部文件？Sass文档将能够很好的解释它。

如果你有一个scss或sass文件，你仅仅只是想把它导入到某一文档里，而不是像让它编译为css文档。你可以在改文件前添加一个下划线，这样就是提醒sass文档不要把它编译为普通的css格式文件了。

你可以这样系组织你的Sass文件。首先创建一个全局scss目录：在这里我创建了一些局部的scss文件，他们是bits ，forms，icons，images，mixins等等。每个部分都有对应的样式分别为：_bits.scss，_forms.scss，_icons.scss，_images.scss，_mixins.scss等等。我们可以很轻易的看到他们的一一对应关系。

+stylesheets/
|--_bits.scss
|--_forms.scss
|--_icons.scss
|--_images.scss
|--_mixins.scss
|--_type.scss

当你做好这些后，下面就可以吧他们导入到你的主题样式表里了。我比较喜欢添加一下注释来提醒一下自己,他们每一部分是有什么作用。

/*变量
---------------
设置变量。包括颜色和间距
--------------- */

@import "bits";

/*基本样式
---------------
设置基本样式. 包括排版,图片,表单和 Icons.
--------------- */

@import "type";
@import "images";
@import "forms";
@import "icons";

当你初次这样组织之后,也会不怎么适应。但是我可以告诉你他将节省你很多的时间。在一个大的项目中, 有了方向就是成功的一半,让那种成千上百行的样式代码都离的远一些吧.取而代之的将是一些简短,明确，关键，易于管理的文档了。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

英文原文：http://alistapart.com/blog/post/organize-that-sass

中文译文：https://www.fedev.cn/preprocessor/organize-that-sass.html

nike air max 2019 yellow