東京鐵塔

結合VS code的 task runner 可以將.scss文件編譯成.css文件。

第一步：安裝Sass transpiler######

# sudo install -g node-sass```
######第二步：創建Sass文件######

styles.scss文件 ：

$padding: 6px;

nav {
ul {
margin: 0;
padding: $padding;
list-style: none;
}
...
}```

第三步：創建tasks.json######

通過 ??P 打開命令面板，鍵入Configure Task Runner點擊 Enter，在選擇對話框中選擇 Others 選項。這會創建一個帶有 tasks.json 文件的 .vscode 文件夾。文件的內容是一個執行任意命令的示例。我們需要簡單的修改文件內容：

  # 修改前 
    "version": "0.1.0",
    "command": "echo",
    "isShellCommand": true,
    "args": ["Hello World"],
    "showOutput": "always"```

修改后

{
"version": "0.1.0",
"command": "node-sass",
"isShellCommand": true,
"args": ["styles.scss", "styles.css"]
}```

tasks.json

第四步：運行Build任務######

點擊 ??B 會執行 node-sass styles.scss styles.css 命令，將 style.scss 編譯到 style.css。

scss to css