學習Sass之安裝Sass（一）

為什么使用Sass

作為前端（html、javascript、css）的三大馬車之一的css，一直以靜態語言存在，HTML5火遍大江南北了、javascript由於NODE.JS而成為目前前后端統一開發語言的不二之選。只有css似乎成為前端開發的被忽視的角色了。

Sass讓css有了動態語言的特點，在初次學習css時，有時候同樣的樣式在不同的#或.中一次又一次重復的編碼，有了Sass，在css語法的基礎上不僅可以寫變量、函數，而且可以百分百的轉換為標准的css。再次把Don‘t Repeat Yourself進行到底，降低了“碼農”的工作量，提高了效率。而且現在越來越多的優秀開發人員專門利用sass和compass構建出非常優秀的前端樣式開發框架（如，Button），再一次提高我們的生產力。

准備條件

在安裝和使用sass之前，需要一些准備條件：

1. 文件夾---存放*.scss 或 *.sass；

2. 編輯器，我們推薦使用Sublime Text 2 或者 3；

3. 你的電腦需要安裝Ruby，因為sass是依賴於Ruby的。在windows需要自己手動下載Ruby的。

安裝Sass

使用命令行安裝sass：

gem install sass

使用命令，查看是否安裝成功，如下顯示表示安裝成功：

$ sass -v
Sass 3.3.8 (Maptastic Maple)

簡單使用Sass

在sass文件夾下創建demo1.scss文件，內容：

$myColor: #ccc;

#page {
	color: $myColor;
}

使用命令行：

sass demo1.scss demo1.css

會在同一個文件夾下生成一個demo1.css文件，內容：

#page {
	color: #cccccc; }

提高生產力的Sass

如下，在學習sass之前我們大概都是這么來寫css的：

ul.nav {float: right}
ul.nav li {float: left;}	
ul.nav li a {color: #111}
ul.nav li.current {font-weight: bold;}

但，有了sass后，那就方便多了：

ul.nav {
	float: right;

    li {
	    float: left;

    	a {
        	color: #111;
    	}
    	&.current {
        	font-weight: bold;
    	}
	}
}

通過編譯，得到css：

ul.nav {
  float: right; }
	ul.nav li {
      float: left; }
      ul.nav li a {
        color: #111; }
      ul.nav li.current {
        font-weight: bold; }

除了排版不一樣之外，再也看不出有什么區別。但使用sass寫出來的樣式結構，不僅層次分明，意思明確，而且編碼量明顯減少。

轉自：http://www.yemeishu.com/學習sass之安裝sass（一）/