[上海|荣耀师兄]JS-左昌杰|2018年11月25日的日报-技能树.IT修真院

发表于： 2018-11-25 22:03:55

1 822

今天完成的事：继续任务十四----十五

明天计划的事：尽力把第一个页面写出来。

遇到的问题：对拆分组建的用法不是太熟悉。

解决办法：查了下相关的资料，尝试着去做吧。

收获：

Sass的 @import 指令引入和css的引入不同（引入非css原文件），Sass的引入最终编译成css文件时，是把引入的文件归纳到一个文件中，即合并成一个文件，而不是css那样，产生额外的网络请求去获取内容。

基于Sass的 @import 指令工作原理，Sass实际编程中可以将结构划分的特别细，多个文件多个目录，即可以拆分代码库到几个文件中，而又不会影响性能，且方便维护与重用。

7-1模式

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

abstracts/

base/

components/

layout/

pages/

themes/

vendors/

当然还有它:

main.scss

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

sass/

|– abstracts/

| |– _variables.scss # Sass Variables

| |– _functions.scss # Sass Functions

| |– _mixins.scss # Sass Mixins

| |– _placeholders.scss # Sass Placeholders

|– 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.

|– vendors/

| |– _bootstrap.scss # Bootstrap

| |– _jquery-ui.scss # jQuery UI

| … # Etc.

`– main.scss # Main Sass file

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

Base文件夹

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

_base.scss

_reset.scss

_typography.scss

如果你的项目中使用了大量的 CSS 动画, 那么你有必要考虑添加一个 _animations.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

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

Abstracts 文件夹

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

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

_variables.scss

_mixins.scss

_functions.scss

_placeholders.scss

当项目体量庞大工具复杂时，通过主题而不是类型分类整理可能更有帮助，比如排版（_typography.scss）、主题（_theming.scss）等。每一个文件都包含所有的相关信息：变量、函数、混合宏和占位符。这样做可以让维护更加单，特别针对于文件较长的情况。

abstracts/ 文件夹也会被称为 helpers/ 或 utilities，具体使用情况取决于个人喜好。

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 和注释外，该文件不应该包含任何其他代码。

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

abstracts/

vendors/

base/