sass變量的聲明和css屬性的聲明很像:

$highlight-color: #F90;

這意味著變量$highlight-color現(xiàn)在的值是#F90。任何可以用作css屬性值的賦值都可以用作sass的變量值，甚至是以空格分割的多個屬性值，如$basic-border: 1px solid black;，或以逗號分割的多個屬性值，如$plain-font: "Myriad Pro"、Myriad、"HelveticaNeue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;。這時變量還沒有生效，除非你引用這個變量——我們很快就會了解如何引用。

與CSS屬性不同，變量可以在css規(guī)則塊定義之外存在。當變量定義在css規(guī)則塊內(nèi)，那么該變量只能在此規(guī)則塊內(nèi)使用。如果它們出現(xiàn)在任何形式的{...}塊中(如@media或者@font-face塊)，情況也是如此:

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//編譯后

nav {
  width: 100px;
  color: #F90;
}

在這段代碼中，$nav-color這個變量定義在了規(guī)則塊外邊，所以在這個樣式表中都可以像nav規(guī)則塊那樣引用它。$width這個變量定義在了nav的{ }規(guī)則塊內(nèi)，所以它只能在nav規(guī)則塊內(nèi)使用。這意味著是你可以在樣式表的其他地方定義和使用$width變量，不會對這里造成影響。

只聲明變量其實沒啥用處，我們最終的目的還是使用它們。上例已介紹了如何使用$nav-color和$width這兩個變量，接下來我們將進一步探討變量的使用方法。