淺談 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 就是任何地方都可以使用的。

  • _buttom.scss
  • _dropdown.scss
  • _alers.scss

layout (版型)

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

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

pages (頁面)

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

  • _index.scss
  • _content.scss

themes (主題)

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

  • _theme.scss
  • _admin.scss

utils (工具)

utils 通常都是放一些工具類型的檔案,例如 p-1mt-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';
// components
@import '_buttom';
// layout
@import '_index';
// pages
@import '_home';
// themes
@import '_admin';
// utils
@import '_helpers';
// vendors
@import '_bootstrap';

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

參考文獻

0%