Sass/Css 设计模式(Smacss) DAY37

今天要来介绍 Sass/Css 设计模式啦~~
首先我们先认识 最好入门的 Smacss
官网: http://smacss.com/

Smacss Base

首先我们可以先利用 Base打好地基
也就是 全站设定
若写好全站设定
就可以满足90%的样式
剩下5~10% 必须客制化的样式
就盖掉就好啦~~
这样就不用连那 90% 的样式通通要写一遍
超麻烦!!
Smacss官网 Base介绍: http://smacss.com/book/type-base

当然
我们也可以把 base拆开来单独做一支 scss档

这里看一个例子
Pure.css: https://purecss.io/
会发现里面也有 base
https://unpkg.com/[email protected]/build/base.css
有兴趣的 可以看一下它的 base档案 是如何撰写的

Smacss Layout(布局管理)

有时候我们浏览网页
会发现网页的某些地方在其他分页还是会存在
以 Bootstrap4 为例子
Bootstrap4:https://getbootstrap.com/
会发现它的 header 都会存在
这时候我们就可以把它拆出来
单独做一支 layout的scss

这里在举一个 Layout 的例子
在之前我们都习惯把命名语意化
但 Smacss这里建议
若有许多共同样式的css
可以抽象化出来
EX:

.bookList{
  color:red;
  width: 100px;
}
.dvdList{
  color:red;
  width: 100px;
}
.cdList{
  color:red;
  width: 100px;
}

会发现他们其实样式都一样
但为了语意化而产生许多的css
我们这时候就可以把这些共同样式改成

// l --> layout(前缀词)
.l-list{
  color:red;
  width: 100px;
}

那今天的介绍就到这里啦
明天将介绍 Smacss 的模组化(module)
若有任何问题 或 内容有误
请不吝色的跟我说唷