SCSS / Sass 是甚麼?

閱讀時間約 6 分鐘
筆記僅以個人清楚理解方式記錄

知識來源

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

前言

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


甚麼是預處理器

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

SCSS / Sass 差別

最明顯的差異為:

raw-image

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 引用,這邊%宣告在首行,所以編譯後會彙整在首行,如果%宣告在下方,則會在下方。
raw-image
如果不用%會變成以下,會多寫出被繼承的class
raw-image


函式

能運算就複雜的邏輯
raw-image


混合

繼承很像,但不會彙整。
raw-image


進階使用

raw-image


防止編譯

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

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


模組導入

模組導入分2種 @import@use 兩者,分別為 整包導入部分導入

@import

raw-image

@use

raw-image


防止偷罵被抓包

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

  • //xxx
  • /* */
raw-image


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


  • joker
  • 2024/05/20
2會員
19內容數
是一隻喜愛前端勇往直前的霹靂酷樂貓
留言0
查看全部
發表第一個留言支持創作者!
從 Google News 追蹤更多 vocus 的最新精選內容