阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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文件。
      目录
      目录