1-1. 變量聲明

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

$highlight-color: #F90;

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

與CSS屬性不同，變量可以在css規(guī)則塊定義之外存在。當(dāng)變量定義在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這個(gè)變量定義在了規(guī)則塊外邊，所以在這個(gè)樣式表中都可以像nav規(guī)則塊那樣引用它。$width這個(gè)變量定義在了nav的{ }規(guī)則塊內(nèi)，所以它只能在nav規(guī)則塊內(nèi)使用。這意味著是你可以在樣式表的其他地方定義和使用$width變量，不會(huì)對(duì)這里造成影響。

只聲明變量其實(shí)沒(méi)啥用處，我們最終的目的還是使用它們。上例已介紹了如何使用$nav-color和$width這兩個(gè)變量，接下來(lái)我們將進(jìn)一步探討變量的使用方法。