准备工作

在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. dbgrid 无法显示表中所有字段

    有时表中字段有更新,dbgrid无法显示表中字段. 解决办法: 1.adoquery断开 2. dbgrid字段全部删除 3.adoquery打开 4.dbgrid选择全部字段

  2. qemu对虚拟机的内存管理（二）

    上篇文章主要分析了qemu中对虚拟机内存管理的关键数据结构及他们之间的联系,这篇文章则主要分析在地址空间发生变化时,如何将其更新至KVM中,保持用户空间与内核空间的同步. 这一系列操作与之前说的Add ...

  3. Luogu4451 [国家集训队]整数的lqp拆分

    题目链接:洛谷 题目大意:求对于所有$n$的拆分$a_i$,使得$\sum_{i=1}^ma_i=n$,$\prod_{i=1}^mf_{a_i}$之和.其中$f_i$为斐波那契数列的第$i$项. 数 ...

  4. bugfree3.0.1-修改“优先级”为中文引起的PHP Error

    博主在搭建好bugfree后,修改了系统中“优先级”字段,将原先系统定义的优先级“1.2.3.4”修改为符合博主自己项目要求的优先级“高.中.低”.修改成功后,系统确实将原先提交的BUG优先级从“1. ...

  5. 017-并发编程-Condition

    一.概述 任何一个Java对象,都拥有一组监视器方法,主要包括wait().notify().notifyAll()方法,这些方法与synchronized关键字配合使用可以实现等待/通知机制.使用这 ...

  6. vs添加github代码库

    1.安装git for windows 2.在vs中工具->扩展和更新,安装github extension 3.在项目中右键,添加源码到git,之后配置git,然后选择同步或者commit即可

  7. C#设计模式(8)——桥接模式（Bridge Pattern）（转）

    一.引言 这里以电视遥控器的一个例子来引出桥接模式解决的问题,首先,我们每个牌子的电视机都有一个遥控器,此时我们能想到的一个设计是——把遥控器做为一个抽象类,抽象类中提供遥控器的所有实现,其他具体电视 ...

  8. Kafka笔记2（安装）

    1.安装java 2.安装zookeeper 3.安装kafka Broker 测试:发布消息 测试:读取消息 4,broker配置 常规配置: broker.id: 默认0  每个broker都需要 ...

  9. vim 命令学习（高级篇）

    [1]打开文件方式 (1)vim +n filename 作用:打开文件,并定位到第n行 例如:vim +103 2019-02-26-errorrepeat.txt 效果:打开2019-02-26- ...

  10. bootloader研究最后一关（上）

    2011-03-12 17:03:17 把map文件也仔细看了下.代码及map文件及段分配的关系,可以参考我总结的图.暂时堆栈我就不放在ZI上了.不是今天的重了点 今天重点研究2440的nandfla ...