08月25, 2018

vscode效率编码-sass必备插件

sass可以有效的提高我们编写css的效率,但是如果再结合上强大的插件,那你会感觉自己已经起飞。接下来推荐两个vscodesass插件。

Sass

这个插件可以支持.sass文件中的Emmet,并且内置了一些代码块,可以很快捷是输出一些代码,不需要配置,安装即用,基本可以说是必备插件。

Live Sass Compiler

这个插件可以让你在编写sass的时候少做很多工作,强烈推荐,插件提供6项配置:

liveSassCompile.settings.formats

  1. 自动编译,也就是说,你在编写sass的时候,当你按下保存,这个插件就会自动帮你编译出一个css文件。
  2. 支持多种导出格式,你可以导出expandedcompactcompressednested四种格式。
  3. 路径配置,你将要导出的css的路径,这是非常有用的。 并且你可以对同一个文件进行不同的配置,比如首先配置导出到style文件夹下的未压缩版.css文件,然后在配置一项导出到style/min文件夹下的压缩版.min.css文件。

我的配置:

"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css"
    },{
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "~/../css/min"
    }
]

liveSassCompile.settings.excludeList

可以排除特定文件夹下不需要配置的sass文件,不过个人在用的时候,基本不需要这项配置,因为sass本身可以支持以_下划线开头的文件不编译的功能。当然也许在某些场景下这配置还是有用的。

liveSassCompile.settings.includeItems

处理单独的sass文件,默认是null

liveSassCompile.settings.generateMap

是否生成.map文件,默认是true

liveSassCompile.settings.autoprefix

对于有些css属性不支持的浏览器,自动添加前缀。

liveSassCompile.settings.showOutputWindow

是否在控制台输出编译情况,默认是true

依赖的插件 - Live Server

这个虽然官方说是依赖于Live Server插件,但是要我说,这个依赖的插件也是好用到不行,因为这个插件可以启动一个本地服务,并且进行自动刷新浏览器。

在不用webpack的情况下我感觉这个插件可以省去十分多的麻烦,真的是良心推荐,附上官方链接:vscode-live-sass-compiler

本文链接:http://www.mobai.pro/post/vacodesass.html

-- EOF --

Comments