Contents
  1. 1. 1. Sass
    1. 1.1. 简介
    2. 1.2. 使用方法
  2. 2. 2. Easy Sass
    1. 2.1. 简介
    2. 2.2. 使用方法
      1. 2.2.1. 1. css保存的目录
      2. 2.2.2. 2. 排除_开头的文件
      3. 2.2.3. 3. 只生成压缩css

不需要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
2
3
4
5
6
"easysass.formats": [
{
"format": "compressed",
"extension": ".css"
}
],

后缀名也可以自行修改 比如加个.min

1
"extension": ".min.css"

最后贴出我自己的配置:

1
2
3
4
5
6
7
8
"easysass.formats": [
{
"format": "compressed",
"extension": ".css"
}
],
"easysass.excludeRegex": "^_[a-z]+",
"easysass.targetDir": "./css",
Contents
  1. 1. 1. Sass
    1. 1.1. 简介
    2. 1.2. 使用方法
  2. 2. 2. Easy Sass
    1. 2.1. 简介
    2. 2.2. 使用方法
      1. 2.2.1. 1. css保存的目录
      2. 2.2.2. 2. 排除_开头的文件
      3. 2.2.3. 3. 只生成压缩css