第 16 集：Bootstrap 客制化 Sass 架构实战范例

此篇会用三个实战范例来当作做 Sass 架构介绍的结尾。

阅读此篇内容前，建议先阅读过前两篇 Sass 架构：

专案架构范例

接下来用三个实际范例来介绍常见的架构范例。

范例一：品牌网页

依照 page 各自页面撰写彼此的样式。

特性：

每一个页面的 独特性高。（例如滚动视差、内容介绍、不同的 hover 效果）
重复性低 没办法建立元件、通用类别。

适合作法：

将 page 各自样式切分，使程序码不会产生冲突的问题，且较容易阅读。

all.scss
|-- layout
     |-- _header.scss
     |-- _footer.scss
|-- base
     |-- _base.scss
|-- helpers
     |-- _variables.scss
     |-- _utilities.scss
|-- page
     |-- _index.scss
     |-- _product.scss
     |-- _store.scss
     |-- _faq.scss

范例二：电商网站

透过元件化、通用类别化，来撰写样式。

特性：

页面中的元件 重复性高。

适合作法：

将样式元件化，透过已经设计好的元件，来组出一个页面出来。

all.scss
|-- layout
     |-- _header.scss
     |-- _footer.scss
|-- helpers
     |-- _variables.scss
     |-- _utilities.scss
     |-- _base.scss
     |-- _util.scss
|-- components
     |-- _button.scss
     |-- _table.scss
     |-- _form.scss
     |-- _grid.scss
     |-- _menu.scss
|-- page
     |-- _index.scss

范例三：综合体

这边就不示范范架构范例了，直接分享常见的问题以及如何解决。

特性：

某几页 独特性高
某几页 重复性高

常见问题分为三个方向来讲：

Bootstrap 相关

Q：特别的文字大小、行高。

A：可以用 通用类别 解决的都用 通用类别 解决，_variables.scss、_utilities.scss 新增自定义变数。

Q：接续上个问题，可能会问如何知道能不能用通用类别解决？

A：参考原始码 _variables.scss、_utilities.scss，在原始码中搜寻要用的 语法关键字。

Q：覆盖 Bootstrap 原本元件样式，要单独写一支元件样式，还是写在有使用此元件的页面样式？

A：建议 单独 拉出来写（ex：_form.scss、_accordion.scss），哪怕只有一点点，拉出来至少後续 方便维护（ex：元件改版），能够 快速 找到问题。

架构相关

Q：没办法分类的样式怎麽处理？

A：通常无法分类的样式我会移到 util.scss。

Q：刻意元件化！

A：若只有单一个页面使用，则建议直接写在此页面的样式中即可（ex：_product.scss），若不熟悉元件的朋友，可以先参考官方的元件。

Q：资料夹内只有一个档案可以吗？

A：先说在设计结构时最大的目的是 提升维护以及可读性，所以大方向建议是 整体结构变少 → 每只档案样式减少 → 档案减少，而不是一昧的为了拆而拆导致整体不方便阅读。

归类语法相关

示范如何归类：

hover 效果
不同图片大小

hover 效果

一支 *.scss 档案专门处理 hover 效果样式：

.translucent-hover:hover {
  opacity: 0.5;
}

.pink-hover:hover {
  background: $pink;
  color: $red;
}

.image-zoom-hover {
  transition: all 1s ease-out;
  &:hover {
    transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
    transform: scale(1.2);
  }
}

不同图片大小

一支 *.scss 档案专门处理图片样式，会存放不同的大小。

.logo {
  width: 45px;
  height: 45px;
  display: block;
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}
.logo-primary {
  background: url(../images/photo-1612157879902-5382bc6e864b.jpeg) no-repeat center/cover;
}
.logo-white {
  background: url(../images/photo-1612157777902-5382bc79864b.jpeg) no-repeat center/cover;
}

.index-banner {
  background: url(../images/photo-1612157777902-5382bc6e864b.jpeg) no-repeat bottom/cover;
}

.head-shots-img-s {
  width: 48px;
  height: 48px;
}

.head-shots-img-m {
  width: 96px;
  height: 96px;
}