此篇会延续上一篇客制化 Sass 原始码架构 ,介绍透过 7+1 Pattern,这个设计模式来管理 Sass 架构。
7+1 的设计模式,用於目录结构以及档案的分割,利於提升维护以及可读性。
7 个资料夹 + 1 个路径总档案:
@import
档案路径。
概念就跟 Bootstrap 的元件一样,component 设计目的在於说,若一个元件会出现在多个页面时,就合适将该区块设计成 component。
_button.scss
_card.scss
_form.scss
存放 Sass 工具类型的档案,compiler 後不会产出实体 css 的样式,通常是结合其他档案呼叫使用。
_variables.scss
_utilities.scss
_functions.scss
存放网站一开始会载入的设置。( 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;
}
共通区块,每个页面都会出现的样式。
_header.scss
_footer.scss
存放每一页各别的样式。
_index.scss
_faq.scss
_product.scss
存放不同种类主题。(大型网站比较容易遇到)
存放外部资源。(套件、函式库)
管理所有
@import
档案路径,如何撰写可以参考上一篇第 14 集:Bootstrap 客制化 sass 架构(上)。
main.scss
all.scss
起手式五步骤:
all.scss
helpers/_uitls.scss
_uitls.scss
主要为尚未归类的样式,我会在这边写样式,样式写到一个段落後再分类到其他适合的位置,若都不适合我就会选择放在 _uitls.scss
或对应的 page scss 档。layout
、pages
components
layout
、pages
下手重构,建议这两个资料夹内的样式,每一支都不要超过一个页面的长度(我自己是控制在30 行内),能拆到没有 layout
、pages
那更好,但新手建议就是先从缩减每一页样式开始。走火入魔警语:
没有最好的架构,只有适不适合自己
不要过度分割,为了分割而分割
>>: Day 16:108. Convert Sorted Array to Binary Search Tree
想走嵌入式系统开发这行必经的路,直接了解最底层怎麽运作的,Arduino底层也是这样运作的,只是Ar...
前言: 知道怎麽使用 Firebase 的资料後 可以开始把辨识的程序码衔接上去 辨识程序码: im...
Hashicorp Nomad: Application Logs AP log又多又杂,相信大部分...
继续昨天。 我们先建立一个struct,四个变数,以及init(初始化)这些变数, 後让他们委任自己...
强型闯入DenoLand[28] - Oak 概念篇 什麽是 Oak? Oak 是一款用来开发 h...