7-1模式.pdfVIP

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 # uttons | |– _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 # ootstrap | |– _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