iT邦幫忙

2021 iThome 鐵人賽

DAY 3
1
Modern Web

SASS 基礎初學三十天系列 第 3

DAY 03 SCSS ? SASS ?

SCSS 是什麼?跟 SASS 是什麼關係?

說到這兩個看起來是一樣的東西,但是每次教學文章又發現好像有點不一樣但是又常看到寫再一起不清不楚彼此糾纏不清的狀態⋯⋯(量子糾纏?

自己在一開始初學的時候也無法分清楚他們兩個是什麼,實作久了就發現,SASS 其實可以理解為 SCSS 的其中一種寫法,SCSS下你可以寫下兼容CSS以及不兼容的兩種做法,各有利弊,可以依照個人喜好去選擇~ 反正最後還是都編譯成CSS XDD

這邊簡單貼一下官方定義兩者的說明,實際理解還是靠各位的慧根了(?

Sass 有兩種語法格式。
首先是 SCSS (Sassy CSS)
這種格式僅在 CSS3 語法的基礎上進行拓展,所有 CSS3 語法在 SCSS 中都是通用的,同時加入 Sass 的特色功能。
此外,SCSS 也支持大多數 CSS hacks 寫法以及瀏覽器前綴寫法 (vendor-specific syntax),以及早期的 IE 濾鏡寫法。
這種格式以 .scss 作為拓展名。

而在官網上的範例中,也可以看到,兩者的差異只在於格式,實際上使用方法是一樣的。

//scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

SASS的特點

Variables、Nesting、Partials、Modules、Mixins、Extend/Inheritance、Operators ⋯⋯

以上內容自己去看官方範例(誒不是

這些內容會在之後的章節一一的詳細介紹~

官方也有針對每個方法的教學文章,大家也可以先去預習看看。

Sass Basics


除此之外,也歡迎大家走走逛逛關於我們團隊夥伴的文章
lu23770127 - SASS 基礎初學三十天
10u1 - 糟了!是世界奇觀!
juck30808 - Python - 數位行銷分析與 Youtube API 教學
HLD - 淺談物件導向與Design Pattern介紹
SiQing47 - 前端?後端?你早晚都要全端的,何不從現在開始?


上一篇
DAY 02 CSS 預處理器
下一篇
DAY 04 實作環境配置 - 1
系列文
SASS 基礎初學三十天30

1 則留言

0
juck30808
iT邦新手 4 級 ‧ 2021-09-18 15:05:06

推推!

我要留言

立即登入留言