下载、安装Ruby和sass，并在webStorm里配置sass

最新推荐文章于 2023-11-15 20:34:51 发布

柚子树

最新推荐文章于 2023-11-15 20:34:51 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： sass配置 web开发文章标签： ruby sass webStorm 安装配置 web开发

本文链接：https://blog.youkuaiyun.com/coder_ying/article/details/62052840

sass配置同时被 2 个专栏收录

1 篇文章

订阅专栏

web开发

1 篇文章

订阅专栏

最近开始学习sass，就配置了开发环境。我用的是webStorm，所以后面也会介绍如何在webStorm里配置scss。众所周知，在安装sass之前
要先安装Ruby 。所以如下：

第一步：下载Ruby安装程序。点击 Ruby Installer下载Ruby安装程序。当然，你也可以选择从Ruby官网下载安装程序再安装，不过速度会十分感人，我试过。注意一下，接下来下载的文件都直接装在C盘根目录下。
这里写图片描述

第二步：下载 SASS，点击sass-3.4.23下载好 sass。也同样装在C盘根目录下。

这里写图片描述

第三步：在rubyinstaller-2.3.3-x64和sass-3.4.23下载完毕后，双击rubyinstaller-2.3.3-x64，开始安装Ruby。

这里写图片描述

点击OK

这里写图片描述

点击“I accept the License”，再点击Next。

这里写图片描述

务必勾选第二个选项。然后点击Install。安装过程中可能会有点慢或卡，不要着急，静心等待。直到出现下图：

这里写图片描述

点击Finish，安装完成，此时你会发现C盘多了文件夹如下：

这里写图片描述

第四步：从“开始”里面找到Start Command Prompt with Ruby，单击，打开它。

这里写图片描述

第五步：在命令行中输入gem install(空格)”C:\sass-3.4.23.gem”，注意如果是Windows 系统，需要手功输入安装的文件路径（不要偷懒哦！！），iOSX 系统，可以直接将下载的安装包拖到 “gem install”后面。输入或者拖动完成之后，按回车键。如下

这里写图片描述

此时已经将sass安装成功。接下来，如果你还不是很放心的话，可以通过下面的命令即可：

sass -v

如果出现如下代码则确认安装成功了（为你鼓掌）。

这里写图片描述

那么，怎么更新sass版本呢？可以直接在命令行操作，输入

gem update sass

这里写图片描述

更新完毕，下面说一下卸载（删除）功能。

gem uninstall sass

在命令行输入如上的代码就可以卸载了。

第六步：上面是下载和安装Ruby和sass的全部过程。下面说一下如何在webStorm里配置 scss。
首先打开webStorm，点击setting （或使用快捷键Ctrl+Alt+s）

这里写图片描述

在搜索框中输入watcher后，点击File Watchers，如下

这里写图片描述

接下来，点击最左边的绿色加号，点击选择里面的SCSS

这里写图片描述

注意红线部分是不是如图，若一样则点击两次 OK，即配置完成。

这里写图片描述

第七步：接下来，我们写一段代码感受一下scss。HTML部分如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scss的实验</title>
    <link rel="stylesheet" href="">
</head>

<body>
<div>我终于配置完成了，开心！</div>
</body>
</html>

向项目中添加scss文件，如下

这里写图片描述

其中text.css和text.css.map是自动生成的。

这里写图片描述

接下来在text.scss中添加代码，如下

$width:200px;
$height:40px;
$background:red;

div
{
  width: $width;
  height: $height;
  background-color: $background;
}

此时我们可以看到在text.css中自动生成了如下代码

这里写图片描述

接下来要做最重要的一件事,将自动生成的text.css文件引入到HTML中，和普通外部引用CSS一样，使用link（注意一下，这里并不是直接引用 scss文件）

这里写图片描述

打开浏览器看一下我们的成果。如下

这里写图片描述

以上就是下载、安装、配置的整个过程。如有不足之处欢迎各位指正，也欢迎大家和我互相关注、讨论问题相互进步，祝各位前程似锦！