#11 [CSS] 入門教學-新手上路重點摘要(上)

本文適用於…

  • 已會使用 CSS 定義樣式(選用適當的選擇器定義屬性與屬性值)
  • 已配置 Ssss 編譯 CSS 的開發環境(若還沒,使用線上編輯器 CodePen來體驗一波)
  • 想快速了解重點語法應用的 Sass 新手

  • Sass 是 CSS PreprocessorCSS 預處理器)的一種
  • 讓 CSS 設計過程能夠更加便利、有結構、更簡潔、更彈性
  • 完成 SASS / SCSS 檔後需編譯為 CSS 檔

Sass 分兩種 - SASS & SCSS

  • SASS (Indented Sass)
    不寫 { } 、不寫;
    縮進取代{ },所以縮排相當重要、不可空錯
    不兼容CSS

    1
    2
    3
    4
    p
    color:black
    span
    color:red
  • SCSS (Sassy CSS)
    一樣要寫{ }、;
    兼容CSS

    1
    2
    3
    4
    5
    6
    p{
    color:black;
    span{
    color:red;
    }
    }
以下先就以SCSS的特色寫法做整理

1. 巢狀結構

基本-選擇器(selector)

  • 當CSS這樣寫時

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #banner{
    //...A
    }
    #banner #logo{
    //...Aa
    }
    #banner #logo img{
    //...Aa1
    }
    #banner nav{
    //...Ab
    }

    可用SASS以巢狀寫 (下例為SCSS)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    #banner{
    ...

    #logo{ // 等同於 #banner #logo
    ...

    img{ // 等同於 #banner #logo img
    ...
    }

    }

    nav{ // 等同於 #banner nav
    ...
    }
    }

& 連接

  • 選擇器用&符號接起父層

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    a{
    color:red;
    &:hover{ //等同於 a:hover
    color:red;
    }

    &.active{ //等同於 a.active
    color:blue;
    }
    }

CSS屬性也可以巢狀

  • 常見前綴相同的屬性如 background / border / font…

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .box{
    background: {
    image: url(/img/bg.jpg);
    repeat: repeat;
    position: top;
    }
    font: {
    size: 1rem; //等同於font-size:...
    weight: bold; // font-weight:...
    }
    }

2. 變數 $

$變數: 值

  • 例:色票管理

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $main-color: blue;
    $sub-color: gray;

    footer {
    background-color: $sub-color;
    color: $main-color;
    }
    p{
    color: $main-color;
    }
  • 變數內的值存數字/字串/布林/空/list/
    map(key1:value,key2:value…) 都可以

3. Mixin

基本用法

  1. @mixin定義

    1
    2
    3
    4
    @mixin basic-space{
    padding: 1rem;
    margin: 1rem;
    }
  2. @include 引用 mixin

    1
    2
    3
    .box{
    @include basic-space
    }
  • 適用於管理重複性的設計定義(模組化管理的概念)

使用參數更彈性

  1. @mixin 定義一個mixin並帶入參數

    1
    2
    3
    4
    @mixin basic-space($mg, $pd){
    padding: $mg;
    margin: $pd;
    }
  2. @include 引用 mixin並帶入參數

    1
    2
    3
    4
    5
    6
    .wrap{
    @include basic-space(0, 1rem);
    }
    .box{
    @include basic-space(1rem, 0.5rem);
    }
  • 讓不同selector直接以不同的屬性值去引用同一個mixin

4. 繼承 @extend

基本用法-定義

  1. %開頭來定義一段開放被繼承的類

    1
    2
    3
    4
    %basic-space{
    padding: 1rem;
    margin: 1rem;
    }
  2. @extend 來繼承

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .wrap{
    @extend %basic-space;
    background-color: red;

    }
    .box{
    @extend %basic-space;
    font-size: 1rem;
    }
    .footer{
    @extend %basic-space;
    }
  • selector 將自動被組合起來:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .wrap, .box, .footer {
    padding: 1rem;
    margin: 1rem;
    }

    .wrap {
    background-color: red;
    }

    .box {
    font-size: 1rem;
    }
  • 與mixin意義不同:
    多個selector(如A、B、C)都繼承同一段stlye定義
    編譯出來的CSS檔中該style定義只會出現一段
    且為group selector(A, B, C)

直接繼承某個 selector

  • 沒寫 % 預先定義、而是直接繼承於某個 selector

    1
    2
    3
    4
    5
    6
    7
    8
    .box {
    ...
    }

    .box-point {
    @extend .box;
    ...
    }

5. 運算符

  • 基本加減乘除與變數運算

    1
    2
    3
    4
    5
    6
    7
    8
    $box-width: 10rem ;

    .box {
    width: $box-width;
    img {
    width: $box-width / 2;
    }
    }

  • 有限制的跨單位計算

  • 語法注意:運算符(加減乘除)兩邊要有空格

6. @import “_file”

  • 透過@import引入多個SCSS/SASS

    使用情境例子:樣式依頁面或特殊需求拆分成多個SCSS檔,最後再統一import到一個SCSS檔,編譯時只編譯最終集成的這個SCSS檔生成單一個CSS檔減少 Request 檔案數)*

    • 例如: 被拆分的數個CSS檔整合到 style.SCSS

      1
      2
      3
      4
      _reset.SCSS
      _layout.SCSS
      _product.SCSS
      _company.SCSS
      1
      2
      3
      4
      @import "reset"
      @import "layout"
      @import "product"
      @import "company"
      • 不打副檔名也OK,會自動抓同名的  SASS檔或 SCSS 檔
      • 只要監聽此檔即可,因被引入的檔案會同時被監聽
    • 編譯後的style.SCSS為被引入的所有檔的style

  • SCSS / SASS檔名開頭為底線 _ 不編譯為CSS檔

7. 註解與編譯

  • 多行註釋 /* .... */ 會編譯到CSS檔內

  • 以及單行註釋/ ... / 不會編譯到CSS檔內

線上試試

若你還沒安裝好 Sass 應用環境也可以先使用線上 Editor 來體驗一下

CSS / SASS / SCSS

  • SCSS- 則較接近原始CSS的語法,擴充了巢狀、mixin、extend…等功能。
  • SASS- 比 SCSS 更簡化到 { } 跟 ; 都省略,相對縮排必須變得嚴謹。
    • 少了{ }符,有些人認為這樣反而很難閱讀。
    • 另一個缺點是無法像 SCSS 一樣通用原生 CSS ,若需複製一段 CSS Code 時(例如使用瀏覽器開發者工具進行試調後、套用框架的範本 code… 等),還需先進行轉換或自行刪除分號與括號。
  • CSS Preprocessor 只是為了加速開發的一種應用,使用原生 CSS 或利用 Preprocessor 開發,就看個人與開發團隊的開發習慣囉!
SASS 跟 SCSS 你比較偏好哪一種呢?歡迎留言分享看法喲!

參考資料

SASSGuide

其他文件


⮩ 本文同步發表在第 12 屆 iT 邦幫忙鐵人賽 《For 前端小幼苗的圖解筆記》

Comments