苏南大叔又和大家见面了,感谢大家的支持。在本篇教程里面,主要讲述:如何在webstorm里面使用sass/scss/less文件的编译功能。当然,苏南大叔以前是喜欢使用koala提供的相关编译功能的,但是现在,似乎不如在webstorm里面使用原生功能,更加简单方便些。

本篇文章的内容,winmac都适用,webstrom/phpstorm/idea等等编辑器也都是适用的。本篇文章的大部分截图是基于mac下的phpstorm做的截图。

安装sassscss的编译器

1、sassscss编译器的安装,是基于ruby的。所以,请确认你的电脑上面安装好了ruby环境。

2、利用gem安装sass
安装命令非常简单。sassscss是一体的,都是安装sass即可。不过为啥有两个分支,苏南大叔就傻傻的表示不明白了。反正,以苏南大叔的观点看来,两者是几乎没有啥区别的。

gem install sass

苏南大叔:webstorm 如何设置 sass/scss/less 编译? - 005
webstorm 如何设置 sass/scss/less 编译?(图8-1)

安装完成sass或者scss之后,注意安装的路径。mac下可以使用which命令找出路径,win下面生成在ruby下的bin文件夹下面。

苏南大叔:webstorm 如何设置 sass/scss/less 编译? - 006
webstorm 如何设置 sass/scss/less 编译?(图8-2)

进阶说明

如果您想再次修改相关设置的话,可以有以下两个途径。

一是:设置中的file watcher项目。

苏南大叔:webstorm 如何设置 sass/scss/less 编译? - 010
webstorm 如何设置 sass/scss/less 编译?(图8-7)

还有个途径是:项目根目录下隐藏文件夹.idea中的watcherTask.xml文件。当然,关于mac下显示隐藏文件,是个很难操作的问题,这里有篇文章,可以帮到您。

苏南大叔:webstorm 如何设置 sass/scss/less 编译? - 999
webstorm 如何设置 sass/scss/less 编译?(图8-8)

总结

sassscssless作为css的编译类型语言,确实解决了css的一些缺陷问题。使得css的无序化情况得到了很大的缓解。建议大家多多使用这些高级功能,就不要把css文件停留在刀耕火种的时代了。您说,是不是这个道理?

更多由苏南大叔带来的css的相关文章,可以点击这里查看。https://newsn.net/tag/css/

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   less    scss

本站的忠实读者小伙伴,正在阅读下面这些文章: