SCSS / Sass 是甚麼？

筆記僅以個人清楚理解方式記錄

知識來源

Alex 宅幹嘛 👨‍💻從 CSS 到 SASS (SCSS) 超入門觀念引導

前言

SCSS / Sass 是甚麼呢？其實這兩者都是 "預處理器" ，由於瀏覽器只看的懂 CSS ，當我們在寫小專案時可能就是直接 CSS 打一打馬上就完事了，如果是超過20、30頁以上的專案呢？想必一直寫重複的東西就算了，客戶突然要改個顏色，想到要手調 20 頁就開始頭痛了吧... 於是!!! 能節省我們一頁頁手打且能減少重複 CSS 的預處理器就誕生了。

甚麼是預處理器

其實它就像台翻譯機，在執行前進行編譯，最後產生出瀏覽器看得懂的 CSS ，類似翻譯蒟蒻。

SCSS / Sass 差別

最明顯的差異為：

Sass

• 使用縮排
• 沒有大括號
• 沒有分號
• 沒分號跟大括號，較簡潔
• 沒分號所以不能跟 CSS 一起混

SCSS ( Sass 基本優點都有 )

• 有大括號
• 有分號
• 根本就是CSS，所以可以無痛使用
• 更易於學習

輔助外掛 Live Server、Live Sass Compiler

以 VS Code 為編輯器

Live Server

有用 VS Code 的使用者基本對此外掛不陌生，它可以在我們本機直接開啟1個伺服器，讓我們前端能所見即所得，我們更改的異動，以下為相關設定。

​//​settings.json
"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "/style"
  },
  {
    "extensionName": ".min.css",
    "format": "compressed",
    "savePath": "/dist/style"
  }
],
"liveSassCompile.settings.excludeList": [
  "**/node_modules/**",
  ".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
  "> 1%",
  "last 2 versions"
],

• liveSassCompile.settings.formats
• extensionName 副檔名
• savePath 放置路徑
• format ( expanded / compressed )

expanded => 未壓縮，手打的樣子 .css
compressed => 壓縮為一行，上線用 .min.css

• liveSassCompile.settings.excludeList 不編譯指定路徑下的
• liveSassCompile.settings.generateMap 是否產出 Sourcemap 對應文件
• liveSassCompile.settings.autoprefix 符合條件就將 CSS 加上瀏覽器支援
• "> 1%" 使用市佔率 >1%
• "last 2 versions" 要能支援最新 2 個版本

主要功能

巢狀

能更清楚理解層級脈絡，但要注意不要巢狀過多層，以免影響效能。

.other-service {
  display: flex;
  justify-content: center;
  .service-2B,
  .service-2C {
    width: 298px;
    margin: 0 20px;
    text-align: center;
  }
}​                                       

變數

宣告並賦予數值，可用於統一調整、函式判斷。

基本用法

$body-bg: #FF0000;
$p-color: #18253d;
$p-font-size: 3rem;

body{
	background-color: $body-bg;
}

p{
	color: $p-color;
	font-size: $p-font-size;
}

取用其一

$sizes: 5px 10px 15px 20px;

//設定 padding-top: 5px
h1 {
  padding-top: nth($sizes, 1);
}

初始值即為 1，並不像 Array 初始值為 0。
第一個參數為作用的變數( 這邊為$padding-set )，第二個為取用的位置。

還有其它方便的方法如以下，來源 Roya's Blog 以及參考 官方詳讀

$theme-colors: (
  primary: blue,
  danger: red,
);

.bg-primary {
  background-color: inspect($theme-colors);
}

$theme-colors: (
  primary: blue,
  danger: red,
);

.bg-primary {
  background-color: map-get($theme-colors, primary);
}

繼承

套用同組CSS，以 % 宣告再以 @extend 引用，這邊%宣告在首行，所以編譯後會彙整在首行，如果%宣告在下方，則會在下方。

如果不用%會變成以下，會多寫出被繼承的class

函式

能運算就複雜的邏輯

混合

跟繼承很像，但不會彙整。

進階使用

防止編譯

我們在開發時，多少會採用模組化的方式，一定會有管理變數、函式的模組，要如何防止他們被編譯呢？

_demo.scss 只要前面加底線就可以了哦。

模組導入

模組導入分2種 @import 跟 @use 兩者，分別為 整包導入 與 部分導入 。

@import

@use

防止偷罵被抓包

我們常常會依靠註解來幫助我們開發時的註記，其實註解也有分，那他們又差別在哪呢？

• //xxx
• /* */

有發現嗎？用 // 的編譯時會省略，而 /* */ 則無，所以註解要分清楚要給編譯器看還是給團隊看的哦，以免偷罵被抓包了～

• joker
• 2024/05/20