筆記僅以個人清楚理解方式記錄
知識來源
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
