iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
2

分享與記錄個人使用 scss 時的那些 wow 點

在前端學習進度上,目前走到了 Javascipt,幾週前開啓 scss 時,感到有點陌生啊~~ 人的記憶不可考,尤其是我的!而如鐵人主題所說,scss 也讓我有 " wow~原來是這樣啊 " 的時候,所以決定整理一篇使用 scss 時,覺得需要注意一下,或是覺得很好用的地方,也記錄一下我對 scss 的記憶,以便後續又金魚腦的自己。

最基礎的精華都在官網裡

一開始學習時,先閱讀官網 LEARN SASS 中 Sass Basics 的部分,官網寫的清楚明瞭,每個範例都可以切換 Sass / Scss / 編譯後的 CSS,可以掌握大部分的基礎知識,接著在看看別人分享的程式碼,就可以吸收理解別人的邏輯。

https://ithelp.ithome.com.tw/upload/images/20181107/20111959Z2Vvc8cTdA.png

Sass 與 Scss 的差別

Sass 與 Scss 的差別僅在於有無使用 { } 包覆程式碼,例如:nav 中的 ul。

Sass:使用縮排方式表達階層關係

nav
  ul
    margin: 0
    padding: 0
    list-style: none

Scss:使用{ }表達階層關係

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

個人比較偏好 Scss 的使用方式,當你寫了一大串程式碼的時候,只要找 { } 就可以確認階層關係。我是不相信自己可以一眼看出 Sass 的階層關係的。

資料夾架構

在 SCSS 中,可以分類程式碼,再利用@import 引入程式碼,使程式碼可以很有結構的呈現在檔名及資料夾上。資料夾架構參考了 The Sass Way 當中的 How to structure a Sass project 這篇文章。

|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins+global project variables
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # primary Sass file

在其他教學文章中,也有其他架構方式,但這是我最喜歡也覺得最明瞭的一種。常用的變數,例如 container 寬度,放在 modules 中。元素區塊,例如 button 等,放在 partials 中。

Nesting 與 BEM 命名方式

經常在 Scss 教學文中,看到作者們提醒不要過度使用 Nesting,否則編譯後的 CSS 程式碼,會看到很可怕很冗長的選擇器,官方建議不要超過 3~4 層。

在命名 class 名稱時,我的習慣是使用 BEM 命名方式,每個 class 名稱富含階層意義。就可以利用 & 繼承前面的 class 名稱,那麼即使我寫了很多層,編譯出來也只會是一個單獨的選擇器名稱。

例如有一個 html 架構是這樣的:

<div class="product">
    <div class="product__intro">
      <div class="product__intro__title"></div>
      <div class="product__intro__description"></div>
    </div>
</div>

Scss 就可以這樣寫:

.product__intro {
   background-color: pink;
   width: 50%;
   &__title {
      font-size: 30px;
   }
   &__description {
      font-size: 15px;
   }
}

CSS 編譯結果會是這樣:

.product__intro {
 background-color: pink;
 width: 50%;
}
.product__intro__title {
 font-size: 30px;
}
.product__intro__description {
 font-size: 15px;
}

利用變數和 mixin 寫好我的 RWD

最後分享的是我愛不釋手的 RWD 撰寫方式,這個方式是在 聖誕老人送禮物 官網中分享一篇文章 使用sass mixin來開發responsive網站。這個方式理解時沒有非常直觀,但用起來非常直觀。

首先我們在剛剛 modules 資料夾中,會撰寫好網站可能會有的幾個尺寸。像是這樣:

//width
$width--phone: 343px;
$width--minipad: 580px;
$width--pad: 880px;
$width--pc: 1300px;

接著撰寫 mixin :以手機尺寸爲範例,給它一個有意義名稱爲 mediaquery_pc,從名稱就可以知道這個東西跟 mediaquery 有關,而且是電腦尺寸。接著撰寫 RWD 都會寫的媒體查詢 @media all and (min-width: $width - pc) 媒體查詢,內容是 @content ,表示在再傳回寫入的內容。

@mixin mediaquery_pc{
    @media all and (min-width: $width--pc){
        @content;
    }
}

在需要使用 RWD 時,如下撰寫:

img {
   width: 100%;
   height: 246px;
   object-fit: cover;
   @include mediaquery_minipad {
     width: 100%;
     height: 186px;
   }
   @include mediaquery_pad {
     width: 100%;
     height: 194px;
   }
   @include mediaquery_pc {
     width: 100%;
     height: 268px;
   }
}

編譯後的 CSS :

img {
  width: 100%;
  height: 246px;
  object-fit: cover;
}
@media all and (min-width: 580px) {
  img {
    width: 100%;
    height: 186px;
  }
}
@media all and (min-width: 880px) {
  img {
    width: 100%;
    height: 194px;
  }
}
@media all and (min-width: 1300px) {
  img {
    width: 100%;
    height: 268px;
  }
}

以上是學習 scss 時的分享:)


上一篇
Day22 實作一個簡單的 Todolist (下)
下一篇
Day24 Flex 空間分配 flex-grow / flex-shrink / flex-basis
系列文
前端之 " wow~原來是這樣啊 "30

尚未有邦友留言

立即登入留言