使用vscode编译sass

in vscode with 0 comment

前言

直接编写css样式文件，大家都知道要做到统一很费劲，特别在修改的时候。
书写sass，然后编译成css，一定程度上能减轻这一负担。
至于语法格式，优点大家可参考sass中文网，这里只教大家如何在vcode书写并编译sass。

下载安装

只需要在商店里搜索easy sass，然后下载安装即可
image.png
安装默认编译路径为.scss所在路径，我们可以简单配置下

{
    "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
    },
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "explorer.confirmDelete": false,
    "window.zoomLevel": -1,
    "terminal.integrated.rendererType": "dom",
    
    // sass 代码
    "easysass.formats": [
        {
            "format": "compact",
            "extension": ".css"
        },{
        "format": "compressed",
        "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "css/"
}

配置文件可在菜单路径为：文件->首选项->设置中找到
image.png

注意

这个文件后缀最好为.scss，因为.sass后缀的对格式有要求。

本文由 止戈 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Feb 4,2020

← → ↓ ↑
X O