Re:从零开始的实习生活01----webstorm和intellij idea下如何自动编译sass和scss文件

            昨天小编需要写一个手机页面用到rem这个单位，css文件里面所有的px单位的值都需要手工算一遍再填上去，一向都是很懒的小编我怎么可以接受的了，所以小编用了sass。利用sass可以编译的特性，封装一个函数用来计算px对应的rem，岂不快哉？但是，在scss文件编译成css文件的时候，小编又懒了。用命令行可以编译sass和scss文件，甚至可以监听单个文件，更可以监听整个文件夹，具体命令可以参考下面三条命令。

单文件转换命令

sass style.scss style.css

单文件监听命令

sass --watch style.scss:style.css

文件夹监听命令

sass --watch sassFileDirectory:cssFileDirectory

       小编在编译过程中遇到一个坑，就是只有我切换窗口才会触发编译，也就是焦点离开该窗体之后，它才会监听到我发生了修改，不知道其他小伙伴们有没有遇到这样的坑。为了偷懒，于是我就用了webstorm和intellij idea自带的自动编译sass的功能，具体的配置步骤在这里跟小伙伴们分享一下。

第一步：检查是否安装了sass

利用sass -v这条命令查看是否安装了sass，出现版本号即为安装成功。如果没有安装，可自行搜索度娘查看如何安装，这里就不在赘述。

第二步：打开webstorm或intellij idea，查看是否有File Watchers这个工具。如果没有则需要到Plugins中下载，如第一张图；若有跳过第一张图看下面的图。

第三步：点击“+”按钮，选择所要监听的文件类型，这里我们选择scss，小伙们需要写sass文件可以选择sass。

第四步：选择自己的sass安装目录，如果windows的话默认是C：\Ruby23\bin\scss.bat，这里需要注意一点如果你是要自动编译sass，则需要选中sass.bat,可别选错了哦。如果是mac下，默认目录是

/usr/local/bin/scss。如果需要自动sass也是一样。

 

第五步：新建一个scss或者sass文件就可以看到底下会多两个文件，我们写代码的时候引入其中的css文件即可。

到此自动编译sass的配置就完成了。最后再说明一下，个人认为关于sass文件和scss文件的区别，仅供新手前端参考。个人认为scss是sass的加强版，如果用sass的话需要非常严格的缩进，没有大括号，没有分号。而scss则跟我们平时使用的css差不多，用起来更加顺手一些。当然要是装比的话还是sass比较好，不过对于我们这些新手前端还是乖乖的用scss比较好，别到时候逼没装成，自己先一脸懵逼了。珍爱生命，远离装逼！最后祝大家早日成为前端大神！