現在有很多信息在預處理器上浮動。大部分信息都面向Mac用戶，所以在這篇文章中，我提供了一個非常簡單的指南，幫助基於Windows的開發人員快速啟動並運行Sass（我選擇的預處理器）。
本文是在此博客上的CSS Basics類別下提交的，但任何已經在Windows上使用Sass的開發人員也可以添加他們的反饋。
總的來說，即使你在命令行上這樣做，Sass也不難設置。但是，如果您沒有興趣完成所有這些步驟，但仍想在Windows上使用Sass，那么，請跳到本文中的最后一個標題，以獲取可讓您在Windows上以最少的設置開始使用Sass的應用程序列表。
1.安裝Ruby
因為Sass是一個Ruby gem，所以你需要做的第一件事是使用Windows安裝程序安裝Ruby 。與OS X不同，默認情況下不在Windows上安裝Ruby，因此Windows用戶需要手動安裝它。
當您完成安裝向導時，您將進入此選項屏幕：
據我所知，你需要檢查的唯一選項是中間選項，它可以幫助你的命令行指令識別在哪里找到（如它所說）“Ruby可執行文件”。否則，當您嘗試在命令提示符下安裝Sass時，您將收到錯誤消息“ruby未被識別為內部或外部命令”（請參閱下一步）。
如果有人對此設置的特定方面有任何其他相關信息，請注釋，我會相應更新。但這對於第一步應該足夠了。
2.使用命令提示符安裝Sass
現在您已經安裝了Ruby，您將能夠安裝Sass。為此，請通過執行以下操作之一打開命令提示符：
- 單擊開始 - >運行，然后鍵入“cmd”; 要么
- 單擊開始 - >所有程序 - >附件，然后選擇“命令提示符”
命令提示符打開后，通過在提示符中鍵入以下內容來安裝Sass：
gem install sass
然后點擊“輸入”，等待安裝Sass。完成后應該如下所示：
如果你想獲得Compass的額外好處，Compass是一個使用Sass的創作框架，你可以選擇做“gem install compass”，它將同時安裝Compass和Sass。我不會在這里詳細介紹Compass的詳細信息，但是一旦你開始使用Sass，你就可以通過谷歌了解一些信息。
3.設置Sass文件
現在已經安裝了Ruby和Sass，你想告訴Sass你正在處理什么文件並讓它從你的Sass文件中編譯你的CSS。
在命令提示符下，使用Sass語法導航到要編寫CSS的文件夾。這不是關於命令行語法的教程，所以如果你從未這樣做過，你必須自己解決這個問題。您可以查看此鏈接或只是在谷歌搜索有關簡單命令行表達式的教程。
以下是導航到我的文件夾后我的提示的處理方式：
請注意，我已使用“cd”或“change directory”命令導航以找到我正在使用的文件夾。
現在，使用Windows資源管理器，進入該文件夾並創建一個擴展名為“.scss”的新CSS文件。因此，您只需在擴展程序的前面添加“s”，而不是通常的“.css”擴展名。您可以通過創建常規CSS文件和更改擴展名，或創建空白文本文件並將.txt擴展名更改為.scss來完成此操作。
告訴Sass“觀察”文件
一旦你的文件存在，你想告訴Sass要注意它的變化，所以它可以用傳統的CSS語法將它編譯成常規的CSS文件。
在命令提示符下，在.scss文件所在的文件夾內，鍵入以下內容，然后按Enter鍵：
sass --watch styles.scss:styles.css
您可以復制上面的代碼並將其粘貼到提示中，方法是右鍵單擊並選擇“粘貼”（ctrl-V將無法在那里工作）。確保“styles.scss”與您在創建新.scss文件時選擇的文件名匹配，並與生成的.css文件相同。不要擔心.css文件還不存在; Sass會自動創建它。
一旦使用了如上所示的正確命令，您應該在命令提示符中看到：
如您所見，Sass現在正在“觀察”您的.scss文件以進行更改。要停止觀看，只需在提示符中按ctrl-C即可。
告訴Sass“觀察”文件
一旦你的文件存在，你想告訴Sass要注意它的變化，所以它可以用傳統的CSS語法將它編譯成常規的CSS文件。
在命令提示符下，在.scss文件所在的文件夾內，鍵入以下內容，然后按Enter鍵：
sass --watch styles.scss:styles.css
您可以復制上面的代碼並將其粘貼到提示中，方法是右鍵單擊並選擇“粘貼”（ctrl-V將無法在那里工作）。確保“styles.scss”與您在創建新.scss文件時選擇的文件名匹配，並與生成的.css文件相同。不要擔心.css文件還不存在; Sass會自動創建它。
一旦使用了如上所示的正確命令，您應該在命令提示符中看到：
如您所見，Sass現在正在“觀察”您的.scss文件以進行更改。要停止觀看，只需在提示符中按ctrl-C即可。
寫一些Sass並讓它編譯
使用任何文本編輯器，打開.scss文件並在其中拋出一些Sass。這篇文章不是關於Sass語法（在線有大量的東西，我將來可能會介紹一些東西），但這里有一個你可以復制和粘貼的例子，取自Sass網站（使用“view plain”）鏈接以獲取沒有行號的代碼的干凈副本）：
$blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }
將其粘貼到文本編輯器后，只需保存.scss文件，然后返回命令提示符。您應該看到如下內容：
請注意，Sass已自動檢測到對文件的更改，並在同一文件夾中生成了一個新文件。在該文件夾中，您將看到名為“styles.css”的新文件（或任何您命名為.scss文件的文件）。在文本編輯器中打開該新文件以查看已編譯的CSS。
使用上面的示例，您應該看到輸出顯示如下（花括號放置或間距可能略有不同）：
.content-navigation { border-color: #3bbfce; color: #2ca2af; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; }
現在，您可以繼續在.scss文件中編寫基於Sass的代碼，Sass將在每次保存原始文件時繼續檢測這些更改並覆蓋CSS文件。
當然，請記住，在HTML文件中，當您引用CSS時，您將指向常規的.css文件。.scss文件僅供您編輯，不會直接在任何網頁中使用。