Sass Guidelines（中文版）
欢迎使用 入门客AI创业平台
当前位置： 入门客AI创业平台 > 学习手册 》 Sass Guidelines（中文版） 》 7-1模式

7-1模式

回到结构这个话题上来，好吗？通常我使用自称为 7-1 模式的结构：7 个文件夹，1 个文件。基本上，你需要将所有的部件放进 7 个不同的文件夹和一个位于根目录的文件（通常命名为 main.scss）中——这个文件编译时会引用所有文件夹而形成一个 CSS 样式表。

  • base/
  • components/
  • layout/
  • pages/
  • themes/
  • utils/
  • vendors/

当然还有它:

  • main.scss

壁纸来源自 Julien He

理想情况下，目录层次如下所示：

sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # Etc…
|
|– components/
|   |– _buttons.scss     # Buttons
|   |– _carousel.scss    # Carousel
|   |– _cover.scss       # Cover
|   |– _dropdown.scss    # Dropdown
|   ...                  # Etc…
|
|– layout/
|   |– _navigation.scss  # Navigation
|   |– _grid.scss        # Grid system
|   |– _header.scss      # Header
|   |– _footer.scss      # Footer
|   |– _sidebar.scss     # Sidebar
|   |– _forms.scss       # Forms
|   ...                  # Etc…
|
|– pages/
|   |– _home.scss        # Home specific styles
|   |– _contact.scss     # Contact specific styles
|   ...                  # Etc…
|
|– themes/
|   |– _theme.scss       # Default theme
|   |– _admin.scss       # Admin theme
|   ...                  # Etc…
|
|– utils/
|   |– _variables.scss   # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _helpers.scss     # Class & placeholders helpers
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   ...                  # Etc…
|
|
`– main.scss             # Main Sass file

文件命名要遵循如上统一的命名规则：使用连字符界定。

BASE文件夹

base/文件夹存放项目中的模板文件。在这里，可以找到重置文件、排版规范文件或者一个样式表（我通常命名为_base.scss）——定义一些 HTML 元素公认的标准样式。

  • _base.scss
  • _reset.scss
  • _typography.scss

LAYOUT文件夹

layout/ 文件夹存放构建网站或者应用程序使用到的布局部分。该文件夹存放网站主体（头部、尾部、导航栏、侧边栏…）的样式表、栅格系统甚至是所有表单的 CSS 样式。

  • _grid.scss
  • _header.scss
  • _footer.scss
  • _sidebar.scss
  • _forms.scss
  • _navigation.scss

layout/ 文件夹也会被称为 partials/, 具体使用情况取决于个人喜好。

COMPONENTS文件夹

对于小型组件来说，有一个 components/ 文件夹来存放。相对于 layout/ 的宏观（定义全局线框结构），components/ 更专注于局部组件。该文件夹包含各类具体模块，基本上是所有的独立模块，比如一个滑块、一个加载块、一个部件……由于整个网站或应用程序主要由微型模块构成，components/ 中往往有大量文件。

  • _media.scss
  • _carousel.scss
  • _thumbnails.scss

components/ 文件夹也会被称为 modules/, 具体使用情况取决于个人喜好。

PAGES文件夹

如果页面有特定的样式，最好将该样式文件放进 pages/ 文件夹并用页面名字。例如，主页通常具有独特的样式，因此可以在 pages/ 下包含一个 _home.scss 以实现需求。

  • _home.scss
  • _contact.scss

取决于各自的开发流程，这些文件可以使用你自己的前缀命名，避免在最终样式表中与他人的样式表发生合并。一切完全取决于你。

THEMES文件夹

在大型网站和应用程序中，往往有多种主题。虽有多种方式管理这些主题，但是我个人更喜欢把它们存放在 themes/ 文件夹中。

  • _theme.scss
  • _admin.scss

这个文件夹与项目的具体实现有密切关系，并且在许多项目中是并不存在的。

UTILS文件夹

utils/ 文件夹包含了整个项目中使用到的 Sass 辅助工具，这里存放着每一个全局变量、函数、混合宏和占位符。

该文件夹的经验法则是，编译后这里不应该输出任何 CSS，单纯的只是一些 Sass 辅助工具。

  • _variables.scss
  • _mixins.scss
  • _functions.scss
  • _placeholders.scss (frequently named _helpers.scss)

utils/ 文件夹也会被称为 helpers/,sass-helpers/ 或者 sass-utils/，具体使用情况取决于个人喜好。

VENDORS文件夹

最后但并非最终的是，大多数的项目都有一个 vendors/ 文件夹，用来存放所有外部库和框架（Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered……）的 CSS 文件。将这些文件放在同一个文件中是一个很好的说明方式:”嘿，这些不是我的代码，无关我的责任。”

  • _normalize.scss
  • _bootstrap.scss
  • _jquery-ui.scss
  • _select2.scss

如果你重写了任何库或框架的部分，建议设置第 8 个文件夹 vendors-extensions/ 来存放，并使用相同的名字命名。

例如，vendors-extensions/_boostrap.scss 文件存放所有重写 Bootstrap 默认 CSS 之后的 CSS 规则。这是为了避免在原库或者框架文件中进行二次编辑——显然不是好方法。

入口文件

主文件（通常写作 main.scss）应该是整个代码库中唯一开头不用下划线命名的 Sass 文件。除 @import 和注释外，该文件不应该包含任何其他代码。

文件应该按照存在的位置顺序依次被引用进来：

  1. vendors/
  2. utils/
  3. base/
  4. layout/
  5. components/
  6. pages/
  7. themes/

为了保持可读性，主文件应遵守如下准则：

  • 每个 @import引用一个文件；
  • 每个 @import单独一行；
  • 从相同文件夹中引入的文件之间不用空行；
  • 从不同文件夹中引入的文件之间用空行分隔；
  • 忽略文件扩展名和下划线前缀。
@import "vendors/bootstrap";
@import "vendors/jquery-ui";

@import "utils/variables";
@import "utils/functions";
@import "utils/mixins";
@import "utils/placeholders";

@import "base/reset";
@import "base/typography";

@import "layout/navigation";
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
@import "layout/forms";

@import "components/buttons";
@import "components/carousel";
@import "components/cover";
@import "components/dropdown";

@import "pages/home";
@import "pages/contact";

@import "themes/theme";
@import "themes/admin";

这里还有另一种引入的有效方式。令人高兴的是，它使文件更具有可读性；令人沮丧的是，更新时会有些麻烦。不管怎么说，由你决定哪一个最好，这没有任何问题。 对于这种方式，主要文件应遵守如下准则：

  • 每个文件夹只使用一个@import
  • 每个@import之后都断行
  • 每个文件占一行
  • 新的文件跟在最后的文件夹后面
  • 文件扩展名都可以省略
@import
  "vendors/bootstrap",
  "vendors/jquery-ui";

@import
  "utils/variables",
  "utils/functions",
  "utils/mixins",
  "utils/placeholders";

@import
  "base/reset",
  "base/typography";

@import
  "layout/navigation",
  "layout/grid",
  "layout/header",
  "layout/footer",
  "layout/sidebar",
  "layout/forms";

@import
  "components/buttons",
  "components/carousel",
  "components/cover",
  "components/dropdown";

@import
  "pages/home",
  "pages/contact";

@import
  "themes/theme",
  "themes/admin";

为了不用亲自引入每一个文件，有一个叫做 sass-globbing 的 Ruby Sass 扩展程序，使在 Sass 的 @import 中,使其做为 glob 模式，就像这样：@import "components/*"

话虽如此，却不推荐它，因为它按照字母顺序引入文件，这往往并不是想要的，特别是处理一个对源文件顺序有所依赖的编程语言的时候。

文章导航