vscode中的sass插件_VS Code 安装sass插件

准备工作

在VS Code上新建一个项目,例：SASS  ，文件夹内包括css 和 sass 和 html  文件夹   在sass文件下新新建sass.scss

1.在拓展商店里搜索“easy sass”，并安装，安装成功后点重新加载。

2.接下来进行配置： 在 vs code 菜单栏依次点击“文件 首选项 设置”，打开settings.json 全局配置文件。搜索“easysass”，然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中，再根据实际情况修改配置项。

注：红色是引用的

{

"workbench.iconTheme": "vscode-icons",

"easysass.compileAfterSave": true,

"easysass.formats": [

{

"format": "nested",

"extension": ".css"

},

{

"format": "nested",

"extension": ".css"

}

],

"easysass.targetDir": "css/",

"files.autoSave": "afterDelay",

"git.path": "E:/Git/bin/git.exe",

"git.confirmSync": false,

"editor.fontWeight": "100",

"json.format.enable": false,

"editor.parameterHints": true,

"editor.quickSuggestions": {

"other": true,

"comments": true,

"strings": true

},

"workbench.colorTheme": "Monokai",

// sass 代码

"easysass.formats": [

{

"format": "compact",

"extension": ".css"

},

{

"format": "compact",

"extension": ".css"

}

],

"easysass.targetDir": "css/", //自定义输出css路径 根据路径不同会有变动

}

3. 生产环境中，在很多情况下 sass 文件和 css 文件是不在同一个目录下的，而Easy Sass 默认输出的 CSS 是和当前 Sass 文件处于相同目录的，为此我们需要配置输出路径。

这里css 和  sass 是在同一目录，其中css 下的demo.css是自动生成的    在index.html中引用的demo.css

例: index.html

bingxiaoxiao

我就是标题

bingxiaoxiao , hello word

版权2010-2019

scss 文件夹下的demo.css

#content {

article {

h1 { color: red }

p { font-size:18px }

}

p{

color: blue;

font-size: 33px

}

aside { background-color: gold ;color: red}

}