如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

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

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

安装sassscss的编译器

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

2、利用gem安装sass
命令很简单。sass和scss是一体的,都是安装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)

安装less编辑器

当然,你真的需要less的话,您可以按着此步骤安装。正常情况下来说,less、sass、scss是高度类似的语法,几乎是没有太大区别的。如果你真的需要less的话,您可以使用npm来全局安装对应的解析器。(这就是说,less是基于nodejs的,而不是ruby)。

npm install less -g

配置webstrom

因为less、sass、scss的高度雷同,在这里,苏南大叔就仅仅配置一个scss文件的相关设置,sass和less应该是大同小异的。

我们先设立一个scss文件,然后webstorm就会提示,是否需要file watcher。我们选择是即可。弹出的对话框里面,我们需要设置代码转化程序的路径及参数。当然路径在mac下面都是自动识别出来的,如果没有识别出来,那么很有可能是你相关编译器安装失败。而在win下面,是不能自动识别的,需要你自己填写相关路径信息。

webstorm如何设置sass/scss/less编译? - 000

webstorm如何设置sass/scss/less编译?(图8-3)

webstorm如何设置sass/scss/less编译? - 001

webstorm如何设置sass/scss/less编译?(图8-4)

webstorm如何设置sass/scss/less编译? - 008

webstorm如何设置sass/scss/less编译?(图8-5)

默认情况下,会在scss文件的同级生成css和map文件。

webstorm如何设置sass/scss/less编译? - 009

webstorm如何设置sass/scss/less编译?(图8-6)

而苏南大叔,并不希望生成map文件,并且css文件里面的内容,也并没有经过压缩。css的路径也不是苏南大叔想要的。所以在这里苏南大叔修改了一下arguments和output paths to fresh。

修改后的值是:

--style compressed --sourcemap=none --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css

../css/$FileNameWithoutExtension$.css

修改前的值是:

--no-cache --update $FileName$:$FileNameWithoutExtension$.css

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

这样配置参数后,咩有map文件,cssscss两个文件夹是平级存放的,css文件是压缩保存的。

进阶说明

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

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

webstorm如何设置sass/scss/less编译? - 010

webstorm如何设置sass/scss/less编译?(图8-7)

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

webstorm如何设置sass/scss/less编译? - 999

webstorm如何设置sass/scss/less编译?(图8-8)

总结

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

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

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

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

打赏任意金额,发送截图到邮箱 shang@newsn.net ,可以领取精选回馈如下(任选其一):
  • 《前端视频教程大礼包》一套
  • 《wordpress精选皮肤》一套
  • 《dedecms织梦精选模板》一套
感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!

岁月静好

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/webstorm-sass-scss-less.html
上一篇好文:win系统,webstrom如何配置scss?
下一篇好文:tableplus如何使用?基于mac系统的关系型数据库管理工具

如果您转载了本文章,出于某种原因,并没有注明作者或者出处。
在这里,苏南大叔也表示理解和支持。因为苏南大叔深深地明白:
您会在合适的时机,合适的地方,给本博客一个外链。对吧?
您若开心,便是安好!岁月静好,但愿世界和平,没有纷争~