【SASS】SCSS介紹以及將SCSS編譯成瀏覽器可讀取的CSS檔案

SCSS可以用類似變數的方式來寫CSS

範例1#只要修改$color中的顏色,就能讓div中的所有顏色也一起更動$color: red;div {
font-size: 18px;
p {
color: $color;
}
ul {
color: $color;
}
}
範例2#在div中,字體大小都會是18px,而p裡面的字是藍色的,ul的字則是綠色的 div {
font-size: 18px;
p {
color: blue;
}
ul {
color: green;
}
}
範例3#.specificMessage除了繼承了$message的所有屬性,還能再額外新增background-color為綠色 %message {
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
}

.specificMessage {
@extend %message;
background-color: green;
}

安裝方式

https://sass-lang.com/install

開啟終端機

#將style.scss編譯成style.csssass style.scss style.css#每當scss內容更新時,自動編譯sass --watch style.scss:style.css#Github Pages支援scss,因此當檔案上傳至Github Pages時,不用編譯

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store