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

為東昌等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及東昌網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為做網(wǎng)站、成都做網(wǎng)站、東昌網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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

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

Sass是什么

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

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

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

Scss是什么

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

由于 Scss 是 CSS 的擴(kuò)展，因此，所有在 CSS 中正常工作的代碼也能在 Scss 中正常工作。也就是說(shuō)，對(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ò)展名

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

下面介紹一下它們的編譯規(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í)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!