准備工作
在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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>bingxiaoxiao</title> <link rel="stylesheet" href="../css/demo.css"> </head> <body> <div class="father" id="content"> <article class="article "> <h1>我就是標題</h1> <p class="">bingxiaoxiao , hello word</p> </article> <aside class="footer"> 版權 2010-2019 </aside> </div> </body> </html>
scss 文件夾下的demo.css
#content { article { h1 { color: red } p { font-size:18px } } p{ color: blue; font-size: 33px } aside { background-color: gold ;color: red} }
