Sass - 安装

在本章中，我们将学习安装 Ruby 的分步过程，Ruby 用于执行 SASS 文件。

SASS 的系统要求

  • 操作系统- 跨平台

  • 浏览器支持- IE (Internet Explorer 8+)、Firefox、Google Chrome、Safari、Opera

  • 编程语言- Ruby

Ruby的安装

步骤 1 - 打开链接https://www.ruby-lang.org/en/downloads/，您将看到如下所示的屏幕 -

SASS安装

下载zip 文件的当前稳定版本。

步骤 2 - 接下来，运行安装程序以在系统上安装Ruby 。

步骤 3 - 接下来，将 Ruby bin 文件夹添加到PATH 用户变量和系统变量以使用 gem 命令。

路径用户变量-

  • 右键单击我的电脑图标。

  • 选择属性。

  • 接下来，单击高级选项卡，然后单击环境变量。

SASS安装

在“环境变量”窗口中，双击PATH，如下面的屏幕截图所示 -

SASS安装

您将看到一个编辑用户变量框，如图所示。在变量值字段中添加 ruby​​ bin 文件夹路径为C:\Ruby\bin。如果已经为其他文件设置了路径，则在其后添加分号并添加 Ruby 文件夹路径，如下所示。

SASS安装

单击“确定”按钮。

系统变量-

  • 单击新建按钮。

SASS安装

接下来，将显示新系统变量块，如下所示。

SASS安装

  • 在变量名称字段中输入RubyOpt ，在变量值字段中输入ruby​​gems。写入变量名称和值后，单击“确定”按钮。

步骤 4 - 打开系统中的命令提示符并输入以下行 -

gem install sass

步骤 5 - 接下来，成功安装 SASS 后您将看到以下屏幕。

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

SASS安装

当您运行上述命令时，它将自动创建style.css文件。每当您更改 SCSS 文件时，style.css文件都会自动更新。

当您运行上面给定的命令时， style.css文件将包含以下代码 -

样式.css

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

让我们执行以下步骤来看看上面给出的代码是如何工作的 -

  • 将上面给出的代码保存在hello.html文件中。

  • 在浏览器中打开此 HTML 文件。

SASS安装