W13_作業一實作記錄

1. 把原本的 style.css 改檔名成 style.scss

2. $sass style.scss style.css

3. $sass --watch style.scss style.css

4. 可以開始改了

要怎麼 import scss 檔案到另一個 scss 檔案？

可以把 scss 裡面的變數名稱、component、layout、mixins 等等都拆成一個個 scss 檔案然後引入

@import '_variables';

參考資料：Sass @import

mixins 該怎麼用？

可以獨立一個檔案出來，寫 mixin

@mixin flex-center {
  display: flex;
  align-items: center;
}

記得「有用到的所有檔案」都要加上 @import '_mixins';

放在 css 裡面長這樣：

&__header {
    font-size: $h5;
    @include flex-center;
    justify-content: space-between;
  }

心得：

這個作業是改 W11 陽春部落格的 CSS 檔案，我把 style 分出去四個部份，

_components.scss: 裡面放「零件類」的東西，一些會重複使用的素材，像是 read more 按鈕等等

_layouts.scss: 裡面放「版型類」，像是 navbar, footer and banner，每一頁都會重複出現的東西

_mixins.scss: 主要是放「語法」，像是垂直置中、類似的 border 等等，有超過兩個以上的語法

_variables.scss: 裡面放變數，如顏色或字體大小

$dark-grey: #333;
$h1: 32px;

• 思考的問題：
  • 做一個小的專案，一開始似乎很難最佳化，像有些東西「看起來似乎沒有必要」現在就做出重構，只能說越做越大時，會越有感。
  • 為了練習把東西硬切出來，也體會了一下怎麼使用語法。
  • 還是本著一個精神，重複的拿出來，做一次就好，don't repeat yourself