准备工作

在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">

            版权 -

        </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}

  }

   

VS Code 安装sass插件的更多相关文章

  1. Sublime Text 3编译Sass - Sublime Text安装Sass插件

    1.首先要安装sass,安装流程: http://www.w3cplus.com/sassguide/install.html 2.sublime text安装Package Control(已经安装 ...

  2. 前端工具HBuilder安装Sass插件

    HBuilder自带未安装的less插件,但是sass插件却没有,需要自己安装,步骤如下: 1.安装sass,参考: http://www.w3cplus.com/sassguide/install. ...

  3. 解决Visual Code安装中文插件失败问题

    早已听闻Visual Code的大名,今日一用,果然不同凡响. 只不过,我的常用开发环境是不联网的,需要离线安装Visual Code和扩展插件. 以前要安装插件只能从VsCode里装,想离线安装比较 ...

  4. VS Code 安装 LeetCode 插件

    练习算法绕不开的一个网站就是力扣,很多小伙伴为了拿到大厂 offer,刷题都刷到吐了. 然而如果直接在 LeetCode 上写代码,那是很痛苦的一件事,那就相当于用 txt 写代码一样,没有 IDE ...

  5. vs code安装leetcode插件

    vs code 安装不成功啊 1.首先确保有node.js 10+,没有的话去官网下载,安装就可以,安装好之后在cmd命令行中输入: node -v 若出现相关版本信息说明安装成功 2.由于leetc ...

  6. VS Code安装yo(Yeoman) 插件下载.net core 模版代码开发

    在安装插件以前,请看插件地址的相关依赖 Pre-requirements [Node.js] (https://nodejs.org) [npm] (https://www.npmjs.com) [Y ...

  7. Installing github.com/mdempsky/gocode FAILED ----vscode安装go插件中的一些坑

    问题前景: 最近在使用vscode,编写一些go的代码,但发现调试的时候,会需要安装很多插件,但通过vscode之间安装的话,会出现如下的错误: Installing github.com/mdemp ...

  8. 解决vs code中golang插件依赖安装失败问题

    解决vs code中golang插件依赖安装失败问题 Installing github.com/nsf/gocode SUCCEEDED Installing github.com/uudashr/ ...

  9. Sass环境安装-Sass sublime 编辑器插件编译方法

    首先官网(http://www.ruby-lang.org/en/downloads/)下载 ruby (1)打开链接进入到下载页面,点击如下位置进行下载 (2)下载页面 (3)进入到各个版本的列表页 ...

随机推荐

  1. session_unset 与 session_destroy 区别

    session_unset() 释放当前在内存中已经创建的所有$_SESSION变量,但不删除session文件以及不释放对应的session id session_destroy() 删除当前用户对 ...

  2. xutils android studio引用问题

    然后rebuild--->关闭项目-->重启,ok public class MyApplication extends Application { @Override public vo ...

  3. Python Pyinstaller打包含pandas库的py文件遇到的坑

    今天的主角依然是pyinstaller打包工具,为了让pyinstaller打包后exe文件不至过大,我们的py脚本文件引用库时尽可能只引用需要的部分,不要引用整个库,多使用“from *** imp ...

  4. cocos中FPS数值的含义

    在cocos2d-x 2.x ,大家都看到了左下角的FPS变成3行,多了两行数据. 1.最上面一行是指的当前场景的渲染批次.(简单理解为需要渲染多少个贴图出来) 2.中间一行是渲染每一帧需要的时间. ...

  5. CentOS 7 搭建Jumpserver跳板机(堡垒机)

    跳板机概述: 跳板机就是一台服务器,开发或运维人员在维护过程中首先要统一登录到这台服务器,然后再登录到目标设备进行维护和操作 跳板机缺点:没有实现对运维人员操作行为的控制和审计,使用跳板机的过程中还是 ...

  6. ES6知识总结

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应 ...

  7. Class_fifth

    1,统计文件夹的文件总数 代码: package Class_fifth; import java.io.File; public class Statistics { public static v ...

  8. Hdu2602 Bone Collector （01背包）

    Problem Description Many years ago , in Teddy’s hometown there was a man who was called “Bone Collec ...

  9. numpy linalg模块

    # 线性代数# numpy.linalg模块包含线性代数的函数.使用这个模块,可以计算逆矩阵.求特征值.解线性方程组以及求解行列式等. import numpy as np # 1. 计算逆矩阵# 创 ...

  10. [转载]lib和dll文件的区别和联系

    出处:https://blog.csdn.net/weiaipan1314/article/details/52252478 什么是lib文件,lib和dll的关系如何 (2008-04-18 19: ...