sass和scss有哪些區別

這篇文章主要介紹了sass和scss有哪些區別，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

區別：1、Sass是以“.sass”后綴為擴展名，而SCSS是以“.scss”后綴為擴展名；2、Sass是以嚴格的縮進式語法規則來書寫，不帶大括號“{}”和分號“;”，而SCSS的語法書寫和CSS語法書寫方式非常類似，帶大括號分號。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

Sass是什么

Sass 是一門高于 CSS 的元語言，它能用來清晰地、結構化地描述文件樣式，有著比普通 CSS 更加強大的功能。Sass 能夠提供更簡潔、更優雅的語法，同時提供多種功能來創建可維護和管理的樣式表。

Sass 是采用 Ruby 語言編寫的一款 CSS 預處理語言，它誕生于2007年，是最大的成熟的 CSS 預處理語言。最初它是為了配合HAML（一種縮進式 HTML 預編譯器）而設計的，因此有著和 HTML 一樣的縮進式風格。SASS是CSS3的一個擴展，增加了規則嵌套、變量、混合、選擇器繼承等等。通過使用命令行的工具或WEB框架插件把它轉換成標準的、格式良好的CSS代碼。

Sass官方網站：http://sass-lang.com

Scss是什么

Scss 是 Sass 3 引入新的語法，是Sassy CSS的簡寫，是CSS3語法的超集，也就是說所有有效的CSS3樣式也同樣適合于Sass。說白了Scss就是Sass的升級版，其語法完全兼容 CSS3，并且繼承了 Sass 的強大功能。也就是說，任何標準的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件。另外，SCSS 還能識別大部分 CSS hacks（一些 CSS 小技巧）和特定于瀏覽器的語法，例如：古老的 IE filter 語法。

由于 Scss 是 CSS 的擴展，因此，所有在 CSS 中正常工作的代碼也能在 Scss 中正常工作。也就是說，對于一個 Sass 用戶，只需要理解 Sass 擴展部分如何工作的，就能完全理解 Scss。大部分擴展，例如變量、parent references 和 指令都是一致的；唯一不同的是，SCSS 需要使用分號和花括號而不是換行和縮進。

sass和scss的區別

Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點：

• 文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名

• 語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。

下面介紹一下它們的編譯規則：

sass的編譯

1. sass編譯的方法：

• 命令編譯

• 自動化編譯

• GUI工具編譯

注意： “單文件編譯” 和 ”多文件編譯” 。

2. sass輸出方式：

截圖 對比：

除了以上的介紹之外，sass還可以進行加法/減法、乘法、除法、變量計算、數字運算、字符運算、顏色運算，等等。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“sass和scss有哪些區別”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!