Sass 和 SCSS 有什麼區別？

scss 是 sass 3 引入新的語法，其語法完全相容 css3，並且繼承了 sass 的強大功能。sass 和 scss 其實是同一種東西，我們平時都稱之為 sass，兩者之間不同之處有以下兩點：

副檔名不同，sass 是以「.sass」字尾為副檔名，而 scss 是以「.scss」字尾為副檔名

語法書寫方式不同，sass 是以嚴格的縮排式語法規則來書寫，不帶大括號({})和分號(?，而 scss 的語法書寫和我們的 css 語法書寫方式非常類似。

先來看乙個示例：

sass 語法：

$font-stack: helvetica, sans-serif //定義變數 $primary-color: #333 //定義變數 body font: 100% $font-stack

color: $primary-color

scss 語法：

$font-stark helvetica, sans-serif;
$primary-color: #333;
body

編譯出來的 css

body

由於 scss 是 css 的擴充套件，因此，所有在 css 中正常工作的**也能在 scss 中正常工作。也就是說，對於乙個 sass 使用者，只需要理解 sass 擴充套件部分如何工作的，就能完全理解 scss。大部分擴充套件，例如變數、parent references 和指令都是一致的；唯一不同的是，scss 需要使用分號和花括號而不是換行和縮排。例如，以下這段簡單的 sass **：

#sidebar width: 30%

background-color: #faa

只需新增花括號和分號就能轉換為 scss 語法：

#sidebar

另外，scss 對空白符號不敏感。上面的**也可以書寫成下面的樣子：

#sidebar

Sass 和 SCSS 有什麼區別？

Sass和Scss有什麼區別？

sass和scss的區別

有什麼區別

Sass 和 SCSS 有什麼區別？

Sass和Scss有什麼區別？

sass和scss的區別

有什麼區別

相關推薦