VS code自动将Sass编译为CSS 一

东京铁塔

结合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