ruby中輸入命令行編譯sass（ruby小白）

Ruby（或cmd中）輸入命令行編譯sass步驟如下：

（1）舉例而言：首先在F盤下建立一個總文件夾，比如test文件夾；其次在該文件夾下建立html，images，js，sass等文件夾。

（2）在sass文件夾中創建要使用到的sass文件。例如common.scss,reset.scss,config.scss等公共文件以及項目中需要使用到的各個文件，當然這裡的文件也可以分別放在不同的文件夾中，不過都是sass文件夾的子目錄。

（3）如下是sass文件夾下的common.scss：

 1 /*
 2 *created by Irene
 3 *2016-04-20
 4  */
 5 div{
 6     width: 300px;
 7     height: 300px;
 8     border: 1px solid #000;
 9     background-color: #333;
10     p{
11         width: 200px;
12         height: 200px;
13         background-color: #666;
14         a{
15             display: inline-block;
16             width: 100px;
17             height: 100px;
18             background-color: #999;
19         }
20     }
21 }

（4）啟動ruby，可以設置快捷鍵（右鍵開始菜單中的ruby，選擇屬性設置快捷鍵），（我設置的是Ctrl+Alt+Z）。

（5）根據步驟輸入命令行。

得到如下結構：

（6）這種情況下的命令行沒有清除緩存，因此會有文件及文件夾生成結果是這樣的：

得到如下結構：

因此最好帶上清除緩存的--no-cache指令。

（7）若是sass文件夾下有多個scss文件，要指定某一個文件被編譯，則專門指定哪一個文件即可。命令見下圖，其中首先找到sass文件這個目錄，然後將sass文件夾下的某一個文件轉化為css文件夾下的某一個。

生成瞭如下的結構：

（8）發現的問題：

a．在test文件夾下必須建立了sass文件夾，ruby需要識別sass文件夾（我試過直接在沒有sass文件夾下進行編譯，失敗了）；

b．--no-cache是清除緩存，--watch是監聽指令，--style是樣式，compressed指令可以壓縮css文件。

c．又發現可幾個編譯為不同形式的css文件形式的指令

（替換命令中的“compressed”）：

【1】nested：嵌套縮進的css代碼，它是預設值。         

 1 /*
 2 *created by Irene
 3 *2016-04-20
 4  */
 5 div {
 6   width: 300px;
 7   height: 300px;
 8   border: 1px solid #000;
 9   background-color: #333; }
10   div p {
11     width: 200px;
12     height: 200px;
13     background-color: #666; }
14     div p a {
15       display: inline-block;
16       width: 100px;
17       height: 100px;
18       background-color: #999; }
19 
20 /*# sourceMappingURL=common.css.map */

【2】expanded：沒有縮進的、擴展的css代碼。

 1 /*
 2 *created by Irene
 3 *2016-04-20
 4  */
 5 div {
 6   width: 300px;
 7   height: 300px;
 8   border: 1px solid #000;
 9   background-color: #333;
10 }
11 div p {
12   width: 200px;
13   height: 200px;
14   background-color: #666;
15 }
16 div p a {
17   display: inline-block;
18   width: 100px;
19   height: 100px;
20   background-color: #999;
21 }
22 
23 /*# sourceMappingURL=common.css.map */

【3】compact：簡潔格式的css代碼。 

1 /*
2 *created by Irene
3 *2016-04-20 */
4 div { width: 300px; height: 300px; border: 1px solid #000; background-color: #333; }
5 div p { width: 200px; height: 200px; background-color: #666; }
6 div p a { display: inline-block; width: 100px; height: 100px; background-color: #999; }
7 
8 /*# sourceMappingURL=common.css.map */

【4】（還是加上這一條，強迫症…）compressed：壓縮後的css代碼。（生產環境當中，一般使用壓縮後的）

1 div{width:300px;height:300px;border:1px solid #000;background-color:#333}div p{width:200px;height:200px;background-color:#666}div p a{display:inline-block;width:100px;height:100px;background-color:#999}
2 /*# sourceMappingURL=common.css.map */

（自言自語：對於這個操作，目前自己的理解是這樣的，肯定很片面也很不具體，但是會一步步學習改善噠。）