Sass 安装

🌙
手机阅读
本文目录结构

本文提供了安装Ruby的逐步过程,用于执行SASS文件。

SASS的系统要求

  • **操作系统:**跨平台

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

  • 编程语言: Ruby

安装Ruby

**步骤(1):**打开链接: www.ruby-lang.org/en/downloads下载zip文件的_当前稳定。

**步骤(2):**接下来,运行安装程序在系统上安装Ruby。

**步骤(3):**接下来,将Ruby bin文件夹添加到您的 _PATH用户变量_和_系统变量_以使用gem命令。

路径用户变量:

  • 右键点击我的电脑

  • 选择属性

  • 接下来,选择高级标签/win10是高级系统设置,然后点击环境变量

  • 在环境变量窗口下,双击 PATH ;

  • 您将得到一个_编辑用户变量_框,如图所示。在变量值字段中将ruby bin文件夹路径添加为 C:\Ruby \ bin 。如果路径已经为其他文件设置,则在其后放置分号,并添加Ruby文件夹路径。点击确定按钮。

系统变量:

  • 点击新建按钮。

  • 接下来,会显示新系统变量块,。

    在变量值字段中输入 RubyOpt ,并在_变量值_字段中输入 rubygems 。写入_变量名称_和_值_后,单击确定按钮。

**步骤(4):**在系统中打开命令提示符,并输入以下行。

gem install sass

**步骤(5):**接下来,在安装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

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

运行以上命令时,style.css 文件将具有以下代码:

style.css

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

让我们执行以下步骤,看看上面的代码如何工作:

  • 将上述代码保存在 hello.html 文件中。
  • 在浏览器中打开此HTML文件。

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了