第 15 集:Bootstrap 客制化 Sass 7-1 Pattern

此篇会延续上一篇客制化 Sass 原始码架构 ,介绍透过 7+1 Pattern,这个设计模式来管理 Sass 架构。

Sass 7-1 Pattern

7+1 的设计模式,用於目录结构以及档案的分割,利於提升维护以及可读性。

7 个资料夹 + 1 个路径总档案:

  • 7 个资料夹分别为:
    • base
    • components
    • layout
    • pages
    • themes
    • utils
    • vendors
  • 1 个总档案:管理全部@import 档案路径。
    • 通常命名为 main 或 all 。

项目说明

元件 components(也称为 module)

概念就跟 Bootstrap 的元件一样,component 设计目的在於说,若一个元件会出现在多个页面时,就合适将该区块设计成 component。

  • _button.scss
  • _card.scss
  • _form.scss

工具 uitls(也称为 helpers)

存放 Sass 工具类型的档案,compiler 後不会产出实体 css 的样式,通常是结合其他档案呼叫使用。

  • _variables.scss
  • _utilities.scss
  • _functions.scss

基础 base(也称为 reboot)

存放网站一开始会载入的设置。( ex:reset 样式、字型、全域样式)

举例几个自己使用 base 时常用样式:

*,*::before,*::after{
  box-sizing:border-box ;
}
ul{
  list-style: none;
  padding:0;
  margin:0;
}
img {
  max-width: 100%;
  height: auto;
}
body{
  font-family: 'Noto Sans TC', $font-family-sans-serif;
  font-weight: normal;
}

版型 layout(也称为 partials)

共通区块,每个页面都会出现的样式。

  • _header.scss
  • _footer.scss

页面 pages

存放每一页各别的样式。

  • _index.scss
  • _faq.scss
  • _product.scss

主题 themes

存放不同种类主题。(大型网站比较容易遇到)

  • 後台样式 admin
  • 亮色暗色版型切换

外部 vendors

存放外部资源。(套件、函式库)

  • jQuery
  • Swiper
  • Bootstrap(_bootstrap.scss)

main.scss(也称为 all.scss)

管理所有 @import 档案路径,如何撰写可以参考上一篇第 14 集:Bootstrap 客制化 sass 架构(上)

  • main.scss
  • all.scss

客制化建议

起手式五步骤:

  • Step1:all.scss
    • 撰写全部环境路径。
  • Step2:helpers/_uitls.scss
    • _uitls.scss 主要为尚未归类的样式,我会在这边写样式,样式写到一个段落後再分类到其他适合的位置,若都不适合我就会选择放在 _uitls.scss 或对应的 page scss 档。
  • Step3:layoutpages
    • 我习惯优先撰写共通区块的样式(ex:header、footer),这样写新的一页样式比较有动力写下去,就不会全都空白难以下手。(抱歉我就拖延癌)
  • Step4:components
    • 善用元件化适当将样式变为 components 元件。
  • Step5:重构
    • 全部写完後开始看程序码是否有可以优化的地方,或是可以拆分的地方,我会优先从 layoutpages 下手重构,建议这两个资料夹内的样式,每一支都不要超过一个页面的长度(我自己是控制在30 行内),能拆到没有 layoutpages 那更好,但新手建议就是先从缩减每一页样式开始。

走火入魔警语:

  • 没有最好的架构,只有适不适合自己
  • 不要过度分割,为了分割而分割

<<:  IT铁人DAY 15-Bridge 桥接模式

>>:  Day 16:108. Convert Sorted Array to Binary Search Tree

[DAY 5] _stm32f103c8t6开发板暂存器开发_控制MCU的GPIO High、Low范例

想走嵌入式系统开发这行必经的路,直接了解最底层怎麽运作的,Arduino底层也是这样运作的,只是Ar...

IOS、Python自学心得30天 Day-24 Firebase衔接Python-2

前言: 知道怎麽使用 Firebase 的资料後 可以开始把辨识的程序码衔接上去 辨识程序码: im...

Day 8. Hashicorp Nomad: Application Logs

Hashicorp Nomad: Application Logs AP log又多又杂,相信大部分...

Day9 Collectionview小实作3

继续昨天。 我们先建立一个struct,四个变数,以及init(初始化)这些变数, 後让他们委任自己...

强型闯入DenoLand[28] - Oak 概念篇

强型闯入DenoLand[28] - Oak 概念篇 什麽是 Oak? Oak 是一款用来开发 h...