Sass 安裝

2018-12-28 16:11 更新

本文提供了安裝Ruby的逐步過程,用于執(zhí)行SASS文件。

SASS的系統(tǒng)要求

  • 操作系統(tǒng):跨平臺(tái)

  • 瀏覽器支持: IE(Internet Explorer 8+),F(xiàn)irefox,Google Chrome,Safari,Opera

  • 編程語言: Ruby

安裝Ruby

步驟(1):打開鏈接 https://www.ruby-lang.org/en/downloads/,您將看到如下所示的屏幕:

SASS Installation

下載zip文件的當(dāng)前穩(wěn)定。

步驟(2):接下來,運(yùn)行安裝程序在系統(tǒng)上安裝Ruby。

步驟(3):接下來,將Ruby bin文件夾添加到您的 PATH用戶變量系統(tǒng)變量以使用gem命令。

路徑用戶變量:

  • 右鍵點(diǎn)擊我的電腦

  • 選擇屬性。

  • 接下來,選擇高級(jí)標(biāo)簽,然后點(diǎn)擊環(huán)境變量

    SASS Installation
  • 在環(huán)境變量窗口下,雙擊 PATH ,如屏幕所示。

    SASS Installation
  • 您將得到一個(gè)編輯用戶變量框,如圖所示。在變量值字段中將ruby bin文件夾路徑添加為 C:\\ Ruby \\ bin 。如果路徑已經(jīng)為其他文件設(shè)置,則在其后放置分號(hào),并添加Ruby文件夾路徑,如下所示。

    SASS Installation

    稍后,點(diǎn)擊確定按鈕。

系統(tǒng)變量:

  • 點(diǎn)擊新建按鈕。

    SASS Installation
  • 接下來,會(huì)顯示新系統(tǒng)變量塊,如下所示。

    SASS Installation

    在變量值字段中輸入 RubyOpt ,并在變量值字段中輸入 rubygems 。寫入變量名稱后,單擊確定按鈕。

步驟(4):在系統(tǒng)中打開命令提示符,并輸入以下行。

gem install sass

步驟(5):接下來,在安裝SASS之后,您將看到以下屏幕。

SASS Installation

例子

下面是一個(gè)簡單的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>

現(xiàn)在我們將創(chuàng)建文件作為 style.scss 這是非常類似于CSS和只有一個(gè)區(qū)別是它將保存與.scss擴(kuò)展名。.htm和.scss文件應(yīng)該在文件夾ruby中創(chuàng)建。您可以將.scss文件保存到文件夾ruby \ lib \ sass \(在此過程之前,在lib目錄中創(chuàng)建一個(gè)文件夾為sass)。

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

您可以通過使用以下命令讓SASS查看文件并在SASS文件更改時(shí)更新CSS:

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

當(dāng)您運(yùn)行上述命令時(shí),它將自動(dòng)創(chuàng)建 style.css 文件。每當(dāng)您更改SCSS文件時(shí),style.css 文件將自動(dòng)更新。

運(yùn)行以上命令時(shí),style.css 文件將具有以下代碼:

style.css

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

讓我們執(zhí)行以下步驟,看看上面的代碼如何工作:

  • 將上述代碼保存在 hello.html 文件中。

  • 在瀏覽器中打開此HTML文件。

SASS Installation
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)