VS Code 安装sass插件

准备工作

在VS Code上新建一个项目,例：SASS ，文件夹内包括css 和 sass 和 html 文件夹在sass文件下新新建sass.scss

1.在拓展商店里搜索“easy sass”，并安装，安装成功后点重新加载。

2.接下来进行配置：在 vs code 菜单栏依次点击“文件首选项设置”，打开 settings.json 全局配置文件。搜索“easysass”，然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中，再根据实际情况修改配置项。

注：红色是引用的

{
 
    "workbench.iconTheme": "vscode-icons",
    "easysass.compileAfterSave": true,
    "easysass.formats": [
        {
            "format": "nested",
            "extension": ".css"
        },
        {
            "format": "nested",
            "extension": ".css"
        }
    ],
    "easysass.targetDir": "css/",
    "files.autoSave": "afterDelay",
    "git.path": "E:/Git/bin/git.exe",
    "git.confirmSync": false,
    "editor.fontWeight": "100",
    "json.format.enable": false,
    "editor.parameterHints": true,
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    "workbench.colorTheme": "Monokai",
    // sass 代码
    "easysass.formats": [
        {
            "format": "compact",
            "extension": ".css"
        },
        {
            "format": "compact",
            "extension": ".css"
        }
    ],
    "easysass.targetDir": "css/",  //自定义输出css路径  根据路径不同会有变动
   
}

3. 生产环境中，在很多情况下 sass 文件和 css 文件是不在同一个目录下的，而Easy Sass 默认输出的 CSS 是和当前 Sass 文件处于相同目录的，为此我们需要配置输出路径。

这里css 和 sass 是在同一目录，其中css 下的demo.css是自动生成的在index.html中引用的demo.css

例: index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bingxiaoxiao</title>
    <link rel="stylesheet" href="../css/demo.css">
</head>

<body>
    <div class="father" id="content">
        <article class="article ">
            <h1>我就是标题</h1>
            <p class="">bingxiaoxiao , hello word</p>
        </article> 
        <aside class="footer">
            版权 2010-2019
        </aside>
    </div>
   
</body>

</html>

scss 文件夹下的demo.css

#content {
    article {
      h1 { color: red }
      p { font-size:18px }
    }
    p{
        color: blue;
        font-size: 33px    
    }
    aside { background-color: gold ;color: red}
  }

posted @ 2019-04-09 15:04 bingxiaoxiao 阅读(9945) 评论(0) 编辑收藏举报

bingxiaoxiao

zhangchenxiao

VS Code 安装sass插件

公告