scss2css in VS code

辛勤的搬运工 用法详见 Here
如何在 VS code 编辑器中使用 scss??? 并生成 css 文件?
首先安装 node 环境， 在 npm 包管理器里面安装 node-sass, 如下图所示

image.png

如果报错 如下

image.png

请按照提示安装组件
下面写一个小 demo

image.png
我希望在 scss 文件里面的文件会被编译 编程 css 文件存放进 css 文件夹里面，
目录如上图所示

还有一个 .vscode 文件夹里面需要建立一个 tasks.json 文件， 文件夹没有的话 自己建一个主要用来运行任务 json 一定要注意路径的正确 文件里面写

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Sass Compile",
            "type": "shell",
            "command": "node-sass ./scss/style.scss ./css/style.css",
            "group": "build",
            "problemMatcher": [
                "$node-sass"
            ]
        }
    ]
}

如果你是 less 使用者的话 把 sass 写成 less 就行
然后运行 任务 -> 运行生成任务 -> Sass Compile

image.png

成功运行

image.png

但是 VS code 不会立即侦测到文件添加 需要刷新 刷新之后会发现在 css 文件夹里面 多了 css 文件
例子：

// 定义变量 
$padding: 10px;
$theme_bg_color: rgba(123, 45, 67, .45);
$theme_pre_color: rgba(20, 10, 35, .8);

@function px2rem($px){
    @return ($px / 750) * 10rem;
}

body {
    background-color: $theme_bg_color;
    header {
        width: px2rem(300);
        padding-top: $padding;
        color: $theme_pre_color;
    }
    main {
        padding: 2 * $padding;
    }
}

转译

body {
  background-color: rgba(123, 45, 67, 0.45); }
  body header {
    width: 4rem;
    padding-top: 10px;
    color: rgba(20, 10, 35, 0.8); }
  body main {
    padding: 20px; }

美滋滋