問過一百次的問題之 Sass 和 SCSS 的差別

前端傻妹
3 min readMar 22, 2020

--

前言

現在是週日晚上,其實心情莫名有點鬱悶,很想找人說說話,但發現不知道能夠找誰,於是決定來做點有助於生產力的事情,就決定給自己一顆蕃茄鐘的時間,來簡要紀錄一下這次做 Stylelint 中,有疑惑的地方。

現在手邊其實還有兩篇文章壓著,寫到一半而已,而且那一半裡面前言寫了大半篇幅,然後真正要用來記錄的正文倒是少得可憐QQ 所幸現在沒太多想講的廢話,讓我們直接進入正文吧!

正文

壹、Sass 與 SCSS 的愛恨情仇歷史篇

Sass 一開始的出現,是為了解決原本 CSS 開發上的會遇到困難,所以提供一系列的[擴充語法](https://www.sitepoint.com/sass-reference/),然後起初的 Sass 是由一群 Ruby 的工程師們寫的,一開始也是用 Ruby 這種程式語言撰寫的,因此語法上承襲了 Ruby **不分號**、**不花括**、**嚴格縮排**這些特性。直到 2010 年中,有人決心消弭 Sass 與 CSS 寫法的鴻溝,於是推出了 SCSS!**SCSS 保有了原本 CSS 的寫法,以及 Sass 延伸出來的擴充語法**。

貳、Sass(Syntactically Awesome StyleSheets)

Sass is an extension of CSS that adds power and elegance to the basic language.

Sass 也能夠代表一種預處理器 (preprocessor) ,可以接受 Sass 和 SCSS 兩種寫法。

Sass 與 SCSS 就寫法和外觀(?)上最大的差異就在於: Sass 是用**縮排**的方式撰寫,而 SCSS 本身與 CSS 幾乎可說是零差異,直接將一個副檔名為 CSS 的檔案,直接改成 SCSS 照樣能夠正常運作。

參、Sass 與 SCSS 特性語法總覽表

Sass
* 語法類似 Ruby
* 不寫大花括、分號
* 嚴格縮排
* 使用 `=` 取代 `:` 作為 assignment
* 使用 `+` 和 `=` 作為重複使用 CSS class 的語法(mixin)

SCSS
* 語法類似 CSS
* 使用大花括、分號
* 使用 `:` 作為 assignment
* 使用 `@mixin` 和 `@include` 兩者搭配,作為重複使用 CSS class 的語法(mixin)

肆、Sass 還是 SCSS?

網路有一說如果不知道要選 Sass 或是 SCSS 的話,可以看以下這點:如果跟你共同的開發者較為熟悉 Ruby 或是 Python,那就選 Sass 吧!如果是另一派 Java 為主軸的共同開發者,那就建議選 SCSS 囉~

我自己曾經有用 Sass 的縮排語法寫過,但真的覺得看了很不習慣QAQ 我原本就HEN習慣花括和分號,所以並不會覺得少了他們對我來說是加分,但或許寫習慣後開發上,是真的能夠少打一些字啦~這篇的作者有參與很多 CSS 相關的專案開發,他在這裡有給出他的意見,如果不知道該如何選擇的朋友,或許可以考慮看看他在這裏的意見唷!

ref

sass-guideline: about-sass
whats-difference-sass-scss
stackoverflow: whats-the-difference-between-scss-and-sass
TechBridge: Sass/SCSS 簡明入門教學

--

--