在vscode上使用SASS

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当前路径，在配置文件中添加

"easysass.targetDir": "./path/to/css"

"./path/to/css"修改成你需要保存css的路径

2. 排除_开头的文件

SASS中通常用_开头的文件表示引入项，这类文件一般是不需要编译的，我们就把他排除掉，在配置文件中添加

"easysass.excludeRegex": "^_[a-z]+"

3. 只生成压缩css

Easy Sass默认会产生两个css，一个压缩，一个未压缩，可以只生成一个：

"easysass.formats": [
        {
            "format": "compressed",
            "extension": ".css"
        }
    ],

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

"extension": ".min.css"

最后贴出我自己的配置：

"easysass.formats": [
    {
        "format": "compressed",
        "extension": ".css"
    }
],
"easysass.excludeRegex": "^_[a-z]+",
"easysass.targetDir": "./css",