SASS 安装
在本章中,我们将学习安装Ruby的步骤——安装Ruby,用于执行SASS文件。
SASS系统要求
操作系统:windows/unix/linux/mac
浏览器支持: IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera
程序设计语言:Ruby
安装Ruby
1.打开https://www.ruby-lang.org/en/downloads/, 你可以看到如下内容,点击下载最新版本.
2.下载完毕,开始安装ruby,安装步骤略.
3.设置环境变量.
PATH变量:
右键单击“我的计算机”图标。
选择属性。
接下来,单击“高级”选项卡,然后单击“环境变量”。你可以看到一个界面,有用户变量和系统变量2个部分.
在用户变量的列表中选中PATH,然后点击"编辑"按钮,在弹出的编辑框中把C:\Ruby\bin添加到末尾,如果前面有其他的值,请在C:\Ruby\bin前面加英文半角的分号(;),编辑完成点击确定保存设置.
系统变量
点击系统变量的"添加"按钮,会弹出一个增加系统变量的窗口
变量名输入RubyOpt,值输入rubygems,确定保存即可.
4.打开控制台,输入如下命令
gem install sass
5.等待安装完成,完成会提示如下内容.
演示
下面是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扩展保存。应该在文件夹ruby内创建.htm和.scss文件。您可以将.scss文件保存到ruby\lib\sass\ (在此程之前,在lib目录中创建一个名为SASS的文件夹)。
h1{ color: #AF80ED; } h3{ color: #DE5E85; }
您可以使用以下命令,告诉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; }
接下来把html内容保存为hello.html,并在浏览器中打开,你会发现它已经生效了.