使用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后缀的对格式有要求。

X O