Sass是一種成熟且穩定的CSS擴充套件語言，它有兩種語法格式。一種是最早的Sass語法格式，被稱為縮排格式（Indented Sass），通常簡稱“Sass”，是一種簡化格式。這種格式以“。sass”作為副檔名。

另一種語法格式是SCSS（SassyCSS），這種格式僅在CSS3語法的基礎上進行拓展，所有CSS3語法在SCSS中都是通用的，同時加入Sass的特色功能。這種格式以“。scss”作為副檔名。本節基於SCSS格式講解Sass的變數宣告和變數引用。

1. 變數宣告

Sass使用“$”符號來標識變數，如$highlight-color和$sidebar-width。需要注意的是，老版本的Sass使用“！”來標識變數。使用$符號的好處是更具美感，並且在CSS中並無他用，不會導致與現存或未來的CSS語法衝突。

Sass變數的宣告和CSS屬性的宣告比較相似，基本語法如下。

上述程式碼表示變數$highlight-color的值是#F90。任何可以用作CSS屬性值的賦值都可以用作Sass的變數值，甚至是以空格或逗號分割多個屬性值，示例程式碼如下。

上述程式碼表示變數$highlight-color的值是#F90。任何可以用作CSS屬性值的賦值都可以用作Sass的變數值，甚至是以空格或逗號分割多個屬性值，示例程式碼如下。

與CSS屬性不同的是，變數可以在CSS規則塊定義之外存在。如果變數定義在CSS規則塊內，那麼該變數只能在此規則塊內使用。如果它們出現在任何形式的{。。。}塊中，例如@media或者@font-face塊中，情況也是如此。

2. 變數引用

在變數定義完成之後，這時變數還沒有生效，除非引用這個變數。下面為大家講解變數的使用方法。示例程式碼如下。

上述程式碼中，凡是CSS屬性的標準值（如1px或者bold）可存在的地方，變數就可以使用。CSS生成時，變數會被它們的值所替代。之後，如果需要一個不同的值，只需要改變這個變數的值，那麼所有引用此變數的地方生成的值都會隨之改變。