SCSS 筆記(1) - What is SASS ?

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

Sass 線上直播課程(9/29)上半場

What is SASS ?

  • Preprocessor : Less -> Sass(Scss) -> Stylus

  • Postprocessor : Postcss reflow AutoPrefixer

Why SASS ?

  • 邏輯式的開發
  • 結構化、模組化
  • 加快開發速度（提高重用性）

How SASS ?

  • SASS 開發邏輯
    • Preprocessor -> CSS -> Postprocessor ->CSS

VSCode

  • VSCode 環境安裝與設定
    • User Settings (使用者區，全域設定)
    • Work Space Settings (工作區，專案區域設定)
  • VSCode 推薦外掛
    • Live Server
    • Live Sass Compile
    • Settings
  • User Setting Config Example
    • format: expanded,expanded,nested,compact,compressed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
    "window.zoomLevel": 3,                        // 自己使用的話可以調小一點(0 or 1就可)
    "window.titleBarStyle": "custom",             // 變更視窗標題列的外觀
    "files.autoSave": "onFocusChange",            //切換焦點存檔
    "editor.formatOnSave": true,                  // 存檔時自動格式調整
    "editor.insertSpaces": true,                  // 以空白取代tab符號
    "editor.tabSize": 2,                          // 縮排空白數
    "emmet.triggerExpansionOnTab": true           //新版VSCode，使用Emmet有時候Tab會失效，要加這個，才會正常觸發emmet
                                                  // ----------- 以上為VScode基本設定 -----------
                                                  // ----------- 以下為Live Sever設定 -----------
    "liveServer.settings.port": 8080              // Live Sever port，建議使用1024以上的port (設定port為0時，他會隨機抓一個未占用的port)
    //"liveSassCompile.settings.excludeList": [], // 排除不要watch的目錄, 減少sass compiler去watch不必要的目錄
    "liveSassCompile.settings.formats":[          // 需了解查看備註區之Live Sass compiler設定
        // This is Default.
        {
            "format": "expanded",  
            "extensionName": ".css",
            "savePath": null
        },
        // You can add more
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/dist/css"
        },
        // More Complex
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css/"
        }
    ],
    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ]
}

Start your project

  1. 新增專案資料夾
  2. 使用 VScode 開啟該資料夾
    • 可使用cmd，在專案資料夾下使用 code .指令
  3. 建立基礎架構 (檔案 or 資料夾)
    • index.html -> 快速基本HTML5基礎架構 : ! + Tab
    • style/ -> 發佈區
    • scss/ -> 工作區
  4. 開始 index.html 和使用 LIVE SEVER
    • Preview on Web -> live-server
    • 右鍵 -> Open with Live Server

補充

Sass vs Scss

  • Sass : 不能大括號，不能分號，必須冒號後面空白一格
1
2
3
4
body {
  color: red;
  font-size: 12px;
}
  • Scss : 完全相容於以往CSS的習慣
1
2
3
body
  color: red
  font-size: 12px

Sass/Scss source map

  • chrome/settings/enable source map
  • 產生的css要有map檔的關聯
  • 要有.map檔
  • 簡單來說就是：右鍵檢查元件會很聰明指向.scss而不是.css

Live Sass Compiler 設定 ( 詳細解說影片空降地點 52:30 )

  • liveSassCompile.settings.formats 參數說明

    • format - 指定編譯css的樣式類型
      • expanded : 開發用, 產出的css看不出是用scss/sass
      • nested
      • compact : 開發用, 產出的css可以看的出是用scss/sass
      • compressed : 發行使用，輸出時，幫忙做程式碼壓縮
    • extensionName - 產出的副檔名，.css為一般程式碼，.min.css為壓縮程式
    • savePath - 指定編譯完後檔案存放路徑
      1
      2
      3
      4
      5
      6
      7
      "liveSassCompile.settings.formats": [
          {
              "format": "compact", 
              "extensionName": ".css",
              "savePath": "/style"
          }
      ]

  • liveSassCompile.settings.generateMap

    • true or false：關閉編譯css後的map檔案。

  • liveSassCompile.settings.autoprefix

    • 編譯成 css 時，Vender Prefixes問題，自動加入後處理器
    • 編譯成 css 時，可幫忙加入瀏覽器前綴
    • browserslist
      • Github
      • Offical -> 線上查詢有哪些瀏覽器跟版本符合

補充資源

0%