开发学习网Sass - 安装
原创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，如下面的屏幕截图所示 -
您将看到一个 编辑用户变量 框，如所示。在 变量值 字段中添加 ruby bin 文件夹路径，如 C:\Ruby\bin。如果路径已为其他文件设置，则在该路径后放置分号并添加 Ruby 文件夹路径，如下所示。
单击 确定 按钮。
系统变量 -
单击 新建 按钮。
接下来，将显示 新建系统变量 块，如下所示。
在 变量名 字段中输入 RubyOpt，在 变量值 字段中输入 rubygems。写入 变量名 和 值 后，单击 确定 按钮。
步骤 4 - 在系统中打开命令提示符，输入以下行 -
gem install sass
步骤 5 - 接下来，成功安装 Sass 后，您将看到以下屏幕。
示例
以下是 Sass 的简单示例。
<html>
<head>
<title> Sass 导入示例</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1>简单示例</h1>
<h3>欢迎来到教程点</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 文件。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。
作者文章
- CSS 使用CSS数学函数 4个月前 (08-23)
- CSS Textual data types 4个月前 (08-23)
- CSS 数字数据类型 4个月前 (08-23)
- CSS CSS 属性值定义语法 4个月前 (08-23)
- CSS 使用 CSS 过渡 4个月前 (08-23)