SCSS 筆記(3) - CSS MODULAR

發表於 | 分類於 | 閱讀次數:
| 822

ALEX線上直播課程(10/6)下半場

如果今天我要做一個網站，第一次完成的第一個頁面要上線前，最少會包含幾支css：

建議:

  • reset
    因為不是自己的，可以的話建議分開。
  • layout
    header、nav、footer這類的
  • content
    真正在寫的

如果有30頁，可能有幾支CSS

32頁

  • reset(1)
  • layout(1)
  • content(30)
  • (僅供參考)

如果是一頁式呢?

  • css*1 (來自scss)
  • scss(*n)

all.scss

1
2
3
4
5
@import './layout/header';
@import './layout/nav';
@import './layout/footer';
...
...

你的reset哪裡來

最好一定要有一個常用的公用檔,可以放在自己的電腦裡再import進來。

@import

all.scss

1
2
3
4
5
6
@import './layout/header';
@import './layout/nav';
@import './layout/footer';
..
...
....

  • import的位置取決於你的樣式要在哪個位置，會影響權重。
  • 也可以巢狀import

_filename

可以將檔案名稱加上底線，變成專門用來import的scss檔，自己本身不會被sass complier產出css檔

集中管理-範例(請依個人需求規劃)

  1. normalize.scss (reset)
  2. layout.scss
1
2
3
@import './utils/_init';
..
...
  1. content.scss
1
2
3
@import './utils/_init';
..
...

_init.scss

1
2
3
4
5
@import './utils/variable';
@import './utils/function';
@import './utils/extend';
@import './utils/extend';
....

  • _variable.scss 管理變數
  • _function.scss 管理函式
  • _extend.scss 管理繼承
  • _mixin.scss 管理屬性

OS：內容不多按照順序寫在一起就好不用分檔案免得自找麻煩。

  1. 變數
  2. function
  3. extend
  4. mixin

注意：如果你import的scss會變成css，不要import兩次以上

rgba

1
2
3
4
$color: #3356db;
div{
    color:($color,0.5);
}

sass 官方函數

for

1
2
3
4
5
6
7
8
$light: white;
$dark: black;

@for $i from 1 through 8 { 
  .gray#{9 - $i}{
    color: adjust-color($dark,$lightness:10% * $i)
  }
}

輸出8個階段的黑到白

1
2
3
4
5
6
7
8
.gray8{
    color: #1a1a1a;
}
..
...
.gray1{
    color: white;
}

除了巢狀以外，透過一些規範我們有一些更好的寫法

CSS MODULAR（模組化）設計模式

閱讀性、重用性、維護姓、擴充性

  1. OOCSS
  2. SMACSS
  3. BEM

OOCSS 提升CSS複用性

主要理念：分離結構與主題，分離容器與內容

  • 適當的使用有助於減少你網頁上重複性的程式碼
  • 網站規模小時，不建議套用OOCSS設計模式：為了讓一組CSS能夠套用在各個頁面上，勢必需要設定很多獨立功能的CSS，所以光你在設計OOCSS理念的程式碼的時間，你可能就已經寫好了。

資料來源：OOCSS - 提升CSS複用性

SMACSS（大型網站推薦）

Module要設計為獨立的樣式， 不該綁定在父容器、ID選擇器、HTML元素，並同時能靈活套用至各頁面上。

主要理念：

  • 結構分類
  • 命名規則
  • HTML/CSS分離

詳細資料參考：SMACSS - Module Rules

BEM 設計模式

  • BLOCK(區塊)
  • ELEMENT(按鈕/標題)
  • MODIFIER(狀態)

BEM的功能主要就是要讓你在瀏覽HTML CODE時，能夠透過觀察class，就能了解你的CSS架構，讓你不用再回去追CSS Code才辨別得出哪些是Layout、Module、OOCSS，就算你專案沒打算使用BEM，那也可以套用其觀念，讓團隊都有個一致的命名規則，讓同事都能一目了然地看懂網站上的架構。

詳細資料參考：BEM 設計模式

0%