W13_作業一實作記錄


Posted by Christy on 2021-09-08

  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









Related Posts

筆記:所有的函式都是閉包:談 JS 中的作用域與 Closure

筆記:所有的函式都是閉包:談 JS 中的作用域與 Closure

我要成為前端工程師的學習筆記:HTML & CSS 篇 - CSS 選擇器 Day3

我要成為前端工程師的學習筆記:HTML & CSS 篇 - CSS 選擇器 Day3

Mac 安裝 NVM

Mac 安裝 NVM


Comments