SASS - 簡介

---

• SASS – 簡介
• SASS – 環境搭建
• SASS – 使用Sass程序
• SASS – 語法
• SASS – 變量
• SASS- 局部文件(Partial)
• SASS – 混合(Mixin)
• SASS – @extend（繼承）指令
• SASS – 操做符
• SASS – 函數
• SASS – 輸出格式

---

Sass是一種CSS擴展語言，它使CSS更加容易編寫維護。Sass 是 Syntactically Awesome StyleSheets（語法很棒的樣式表） 的縮寫，對於有大量CSS代碼的項目特別有用。

Sass的工做方式是，在Sass源文件中寫代碼，而後由Sass程序（Sass編譯器/轉譯器）將其轉換爲CSS文件。

能夠看出，這相似於c語言，開發者在c源文件中編寫代碼，而後由編譯器生成可執行性文件。

因此你不會直接修改css文件，而是修改Sass源文件。

Sass代碼與CSS代碼類似，還多了一些東西，好比變量、混合符、數學運算符等等。

例如，能夠定義一個顏色變量，在多個選擇器中使用，避免了在多個選擇器中重複寫相同的顏色值，修改時只需修改變量值就能夠了。

要使用Sass，先要安裝Sass程序，Sass程序是一種編譯器/轉譯器，主要做用是把sass編譯爲css，Sass程序運行在Ruby上，因此Ruby也須要安裝。

SASS程序使用方式

SASS程序有3種使用方式：

• 做爲命令行工具
• 做爲獨立的Ruby模塊
• 做爲任何Rack-enabled的框架(包括Ruby on Rails和Merb)的插件

編寫SASS代碼

Sass支持完整的CSS語法，以及一組名爲SassScript的擴展。SassScript容許屬性使用變量、算術和函數。SassScript能夠用於任何屬性值，還能夠用來動態生成選擇器和屬性名。

Sass的優勢

Sass的主要優勢：

• 有助於保持大型樣式表的良好組織
• 提供了對CSS的擴展，如變量、函數、嵌套和混合
• 幫助開發人員快速開發CSS