win10下配置webstorm自动编译SASS

最近刚接触SASS，语法规则还没学习，就先研究下环境的配置吧。
webstorm是一款很强大的编译器，一直在使用。

1、安装ruby

下载安装包：
CSDN免积分下载rubyinstaller-2.3.3-x64

下载后双击安装，路径默认就可以，安装的时候记得勾选下面两个选项

安装完毕后点击开始菜单中的 Start Command

输入 gem install sass

安装完毕后输入 sass -v查看sass版本信息

---

2、webstorm配置

点击setting选择tool下的file watcher 如下图：

点击右侧加号 选择SCSS

配置项如下，只需修改Program的路径，设置为ruby安装目录下的Ruby23-x64\bin\scss.bat

然后点击OK

---

3、实际体验一下SASS

安装并且配置好之后，我们新建一个项目，千万不要出现中文目录名，否则会编译出错。

新建一个 a1.scss文件

输入简单的SASS代码：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这时webstorm就会自动编译了 会在当前a1.scss下生产a1.css文件

大功告成！

---

4、Sass 和 SCSS 有什么区别？

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

---

个人微信公众号：

如果我的文章对您有帮助，微信支付宝打赏：