开发学院

您的位置:首页>教程>正文

教程正文

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/, 你可以看到如下内容,点击下载最新版本.

down_ruby.jpg

2.下载完毕,开始安装ruby,安装步骤略.

3.设置环境变量.


PATH变量:


右键单击“我的计算机”图标。

选择属性。

接下来,单击“高级”选项卡,然后单击“环境变量”。你可以看到一个界面,有用户变量和系统变量2个部分.

sass-installation-step3.jpg

在用户变量的列表中选中PATH,然后点击"编辑"按钮,在弹出的编辑框中把C:\Ruby\bin添加到末尾,如果前面有其他的值,请在C:\Ruby\bin前面加英文半角的分号(;),编辑完成点击确定保存设置.


系统变量


点击系统变量的"添加"按钮,会弹出一个增加系统变量的窗口

sass-installation-step5.jpg

变量名输入RubyOpt,值输入rubygems,确定保存即可.


4.打开控制台,输入如下命令

gem install sass


5.等待安装完成,完成会提示如下内容.

sass-installation-step7.jpg


演示


下面是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,并在浏览器中打开,你会发现它已经生效了.