sass和scss有哪些區(qū)別

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

區(qū)別：1、Sass是以“.sass”后綴為擴(kuò)展名，而SCSS是以“.scss”后綴為擴(kuò)展名；2、Sass是以嚴(yán)格的縮進(jìn)式語法規(guī)則來書寫，不帶大括號(hào)“{}”和分號(hào)“;”，而SCSS的語法書寫和CSS語法書寫方式非常類似，帶大括號(hào)分號(hào)。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

Sass是什么

Sass 是一門高于 CSS 的元語言，它能用來清晰地、結(jié)構(gòu)化地描述文件樣式，有著比普通 CSS 更加強(qiáng)大的功能。Sass 能夠提供更簡潔、更優(yōu)雅的語法，同時(shí)提供多種功能來創(chuàng)建可維護(hù)和管理的樣式表。

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

Sass官方網(wǎng)站：http://sass-lang.com

Scss是什么

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

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

sass和scss的區(qū)別

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

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

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

下面介紹一下它們的編譯規(guī)則：

sass的編譯

1. sass編譯的方法：

• 命令編譯

• 自動(dòng)化編譯

• GUI工具編譯

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

2. sass輸出方式：

截圖 對(duì)比：

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“sass和scss有哪些區(qū)別”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!