Sass - 安裝

本章將學習一步一步安裝 Ruby 的過程，Ruby 用於執行 Sass 檔案。

Sass 系統要求

作業系統 − 跨平臺
瀏覽器支援 − IE（Internet Explorer 8+）、Firefox、Google Chrome、Safari、Opera
程式語言 − Ruby

Ruby 的安裝

步驟 1 − 開啟連結 https://www.ruby-lang.org/en/downloads/，您將看到如下所示的螢幕 −

下載當前穩定版的 zip 檔案。

步驟 2 − 接下來，執行安裝程式以在系統上安裝Ruby。

步驟 3 − 接下來，將 Ruby 的 bin 資料夾新增到您的PATH 使用者變數和系統變數中，以便使用 gem 命令。

PATH 使用者變數 −

右鍵單擊我的電腦圖示。
選擇屬性。
接下來，單擊高階選項卡，然後單擊環境變數。

在環境變數視窗中，雙擊PATH，如下圖所示 −

您將看到一個編輯使用者變數框，如圖所示。在變數值欄位中新增 ruby bin 資料夾路徑，例如C:\Ruby\bin。如果已為其他檔案設定路徑，則在其後加上分號，然後新增 Ruby 資料夾路徑，如下所示。

單擊確定按鈕。

系統變數 −

單擊新建按鈕。

接下來，將顯示新建系統變數塊，如下所示。

在變數名欄位中輸入RubyOpt，在變數值欄位中輸入rubygems。寫入變數名和值後，單擊確定按鈕。

步驟 4 − 在您的系統中開啟命令提示符並輸入以下命令 −

gem install sass

步驟 5 − 成功安裝 Sass 後，您將看到以下螢幕。

示例

以下是 Sass 的一個簡單示例。

<html>
   <head>
      <title> Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Simple Example</h1>
      <h3>Welcome to TutorialsPoint</h3>
   </body>
</html>

現在，我們將建立一個名為style.scss的檔案，它與 CSS 非常相似，唯一的區別是它將以 .scss 副檔名儲存。.htm 和 .scss 檔案都應該在ruby資料夾內建立。您可以將 .scss 檔案儲存在ruby\lib\sass\資料夾中（在此過程之前，請在 lib 目錄中建立一個名為sass的資料夾）。

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

您可以告訴 Sass 監視檔案並在 Sass 檔案更改時更新 CSS，方法是使用以下命令 −

sass --watch C:\ruby\lib\sass\style.scss:style.css

執行上述命令後，它將自動建立style.css檔案。每當您更改 SCSS 檔案時，style.css檔案都會自動更新。

執行上述命令後，style.css檔案將包含以下程式碼 −

style.css

h1 {
   color: #AF80ED;
}
h3 {
   color: #DE5E85;
}

讓我們執行以下步驟來檢視上述程式碼是如何工作的 −

將上述程式碼儲存到hello.html檔案中。
在瀏覽器中開啟此 HTML 檔案。

列印頁面