Sass和SCSS之間的不同之處是什麼？

?Sass和SCSS之間的不同之處

這是2014年4月28日發布的文章的更新版本

我已經在(http://www.sitepoint.com/author/hgiraudel/) 里寫了很多關於Sass，但有一些意見明確表示，並不是每個人都知道Sass所指的是什麼。這裡有一點清晰：

當我們在討論Sass時，我們通常將預處理器和語言作為一個整體。我們常說，例如，「我們正在使用Sass」，或者「這是Sass mixin」。同時，Sass（預處理器）允許兩種不同的語法:

Sass, also known asthe indented syntax

SCSS, a CSS-like syntax

Sass的歷史

最初，Sass是由Ruby開發人員設計和編寫的另一個名為[Haml]（http://haml.info/）的預處理程序的一部分。因此，Sass樣式表使用的是不帶括弧、不含分號和嚴格縮進的Ruby類語法，像這樣：

正如你所看到的，這與普通的CSS相比有很大的變化。即使你是一個Sass（預處理器）的用戶，你可以看到這與我們通常的習慣是非常不同的。可變符號是「！」而不是「$」,分配符號是「=」而不是「：」。很奇怪。

但是，Sass看起來就像這樣，直到3.0的版本在2010年5月問世，為Sassy CSS引入了一種名為SCSS的全新語法。

SCSS絕對比Sass更接近於CSS.話雖如此，Sass維護者也努力通過縮減語法將「！」（可變符號）和「=」（賦值符號）從SCSS移到「$」和「：」使兩種語法更接近。 Now, when starting a new project, you may wonder which syntax you should use. Let me enlighten the path and explain the pros and cons of each syntax.

Sass縮進語法的優點

雖然這種語法可能看起來很奇怪，它有一些有趣的觀點。首先，它是更短，更容易打字。沒有大括弧和分號，你不再需要所有的東西。更好。當單個字元「=」和「+」足夠時不需要「@mixin」或者 「@include」。

另外Sass語法通過依靠縮減來執行清潔編碼標準。因為一個錯誤的縮減可能會破壞整個「.sass」樣式表,所以它確保編碼始終保持乾淨且格式良好。有一種編寫Sass代碼的方法：好方法。

但要小心！在Sass中縮進means something。當縮進一個選擇器時，這意味著它嵌套在上一個選擇器中。例如：

… will output the following CSS:（將輸出以下CSS）

簡單的事實推理將「.element-b」放在同一級的右邊，意味著它是「.element-a」的孩子，改變了所得到的CSS。請小心你的縮進。

此外，我覺得基於語法的縮進將可能適合一個Ruby/Python團隊而不是PHP/Java團隊（雖然這是有爭議的，但我樂意聽到相反的意見。)

SCSS語法的優點

（對於啟動器，它是完全兼容CSS。它意味著，你可以重命名一個「.scss」中的CSS文件並且它將just work。自SCSS發布以來，使SCSS與CSS完全兼容，一直是Sass的維護者的首要任務，這是在我看來很大的一件事。此外，他們試圖堅持更接近於那些在將來可能成為一個有效的CSS語法（故）。

因為SCSS與CSS兼容，這意味著很少沒有學習曲線。語法是已知的：畢竟，它只是有一些額外的CSS。當與沒有經驗的開發者合作時，這很重要：他們可能在一開始不了解什麼是Sass的時候就能夠快速開始編寫。

此外，它更容易閱讀，因為它實際上是有意義的。當你讀「@mixin」時，你知道這是一個混合聲明；當你看到「@include」時，你正在調用mixin。它沒有任何快捷方式，一旦讀出來，一切都是有意義的。

此外，Sass的大多數現有工具，插件和演示都是用SCSS語法開發的。隨著時間的推移，這種語法主要是出於上述原因變得越來越突出並且被默認選擇。

最後的想法

這個選擇取決於你，但除非你有很好的理由使用縮減語法進行編碼，否則我強烈建議使用SCSS勝過Sass.不僅僅在於它更簡單，而且它更方便。

我曾嘗試過縮減的語法，並且喜歡它。我喜歡它是因為短而且容易。在最後一刻我改變主意之前我實際上正將整個代碼庫移到Sass。我感謝我過去的自我，以阻止這一舉動，因為我們一旦使用縮進語法，它將很難與我們的幾個工具一起使用。

此外，請注意Sass永遠不是大寫字母，無論你是在談論語言還是語法。同時，SCSS始終是大寫字母。需要提醒？SassnotSASS.com可以挽救。

如果你有志想成為一名真正的全棧工程師，不妨長按下面的二維碼掃描並識別，會有非常專業的老師幫你制定學習計劃，還有真正能夠幫你提高的課程在等著你！

加老師為好友，制定學習計劃

加老師為好友，諮詢課程內容

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！