在vscode上使用SASS
Contents
不需要rubby 不需要node-sass,使用VSCode超简单的开发SASS
让你的VSCode支持SASS,需要两个插件:
1. Sass
简介
让VSCode支持SASS自动补全和代码片段(snippets)
使用方法
自动补全类似css
常用代码片段:
var
mixin
lighten
darken
warn
if
for
each
while
2. Easy Sass
简介
在保存SASS后自动编译
使用方法
安装即可使用,这里主要谈谈配置
修改用户配置在
文件
->首选项
->设置
左侧是系统配置,不可修改,右侧是用户配置,会覆盖左侧同名配置
是JSON
格式,注意,
不要漏掉
1. css保存的目录
默认自动编译保存的路径为SASS当前路径,在配置文件中添加
1 | "easysass.targetDir": "./path/to/css" |
"./path/to/css"
修改成你需要保存css
的路径
2. 排除_
开头的文件
SASS中通常用_
开头的文件表示引入项,这类文件一般是不需要编译的,我们就把他排除掉,在配置文件中添加
1 | "easysass.excludeRegex": "^_[a-z]+" |
3. 只生成压缩css
Easy Sass
默认会产生两个css,一个压缩,一个未压缩,可以只生成一个:
1 | "easysass.formats": [ |
后缀名也可以自行修改 比如加个.min
:
1 | "extension": ".min.css" |
最后贴出我自己的配置:
1 | "easysass.formats": [ |