淺談 CSS 設計模式系列-Sass 7-1 Pattern 篇

前言

7+1 的設計模式主要是在講目錄結構的區分，早期開發 CSS 時只能將所有檔案放在同一個地方，那麼這樣就會導致維護上的困擾，因此在開發 Sass 時就可以搭配 @import 然後使用資料夾區分相關檔案，也就是所謂的 Sass 7-1 Pattern。

Sass 7-1 Pattern

Sass 7-1 Pattern 中的 7-1 代表著七個資料夾以及一個檔案，基本上就是為了方便區分 Sass。

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

以及主要引入的檔案

• all.scss or main.scss

以上就是所謂的 Sass 7-1 Pattern，簡單來講 Sass 7-1 Pattern 就是要你去做檔案的切分，否則做你將全部檔案散在同一層，其實在維護上會非常的困擾。

base (基礎)

base 資料夾底下都會放 CSS Reset 、SMACSS 的初始化或是字型的基礎設置等都是屬於該資料夾底下

• _reset.scss
• _base.scss
• _fontStyle.scss

components (元件)

components 基本上概念就跟 Bootstrap 的元件一樣，這些元件簡單來講並不會受限在特定區塊，例如限制在 header，因此基本上 components 就是任何地方都可以使用的。

• _button.scss
• _dropdown.scss
• _alert.scss

layout (版型)

layout 的的話就跟他的翻譯是一樣的，就是針對版面去做切分

• _header.scss
• _footer.scss
• _nav.scss

pages (頁面)

pages 的話通常會放一些只有這個頁面才會使用的樣式

• _index.scss
• _content.scss

themes (主題)

themes 的概念就是如果這個網站上面多個風格版型，例如有白色版型與黑色版型，那就可以用這個方式去區分

• _theme.scss
• _admin.scss

utils (工具)

utils 通常都是放一些工具類型的檔案，例如 p-1、mt-10 這類的生成工具

• _helpers.scss
• _mixin.scss
• _function.scss

vendors (外部)

vendors 通常都是放一些外部的第三方套件

• _bootstrap.scss
• _swiper.scss

main or all

最後一個檔案就是主要的引入檔案，通常這一支裡面只會有 @import 而已

以下僅是引入範例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// base
@import '_reset';
// utils
@import '_helpers';
// components
@import '_button';
// layout
@import '_index';
// pages
@import '_home';
// themes
@import '_admin';
// vendors
@import '_bootstrap';

基本上這些規範並不一定要完全遵守，如果專案其實沒有很大的話，其實也可以只使用 base、components、layout，最主要 Sass 7-1 Pattern 是為了讓我們未來要維護時，可以比較容易找到檔案而已。

參考文獻

• Sass 7-1 Pattern
• sass-guidelin