准备工作

在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. [tldk][dpdk][dev] TLDK--基于dpdk的用户态协议栈传输层组件简单调研

    如题,以下是一份简单的快速调研. TLDK: Transport Layer Development Kit 一 什么是TLDK transport layer development kit 处理t ...

  2. linear-gradient常用实现效果

    之前也研究过css3的这个属性,感觉没什么大用,一般的开发不会用到,毕竟调出来的渐变不专业,不如找一个好看的图片,其实很多时候还是有用的,偷来三个例子. 一.控制虚线 一般写虚线都用dashed,但有 ...

  3. C# xml数组的序列和反序列化

    先来看xml <?xml version="1.0"?> <root xmlns:xsi="http://www.w3.org/2001/XMLSche ...

  4. WIN7虚拟桌面创建（多屏幕多桌面）

    Windows7/WIN7虚拟桌面怎么用怎么创建多桌面(摘录) 在使用电脑中经常会遇到桌面软件太多了不够用的感慨,那么要是一台电脑有多个桌面就好了.在windows10中自带已经支持了虚拟桌面,在wi ...

  5. TP无限回复

    引入文件和css样式 <script src="__PUBLIC__/bootstrap/js/jquery-1.11.2.min.js"></script> ...

  6. ZAmbIE [DDoS Attacks](DDOS攻击)

    在youtube上发现的一个视频 这是一个开源项目 git clone https://github.com/zanyarjamal/zambie.git chmod -R 777 zambie cd ...

  7. JavaWeb-----ServletConfig对象和servletContext对象

    1.ServletConfig ServletConfig:代表当前Servlet在web.xml中的配置信息 String getServletName()  -- 获取当前Servlet在web. ...

  8. PHP XAMPP windows环境安装扩展redis 致命错误: Class 'Redis' not found解决方法

    PHP XAMPP windows环境安装扩展redis 致命错误: Class 'Redis' not found解决方法 1.电脑需要先安装redis服务端环境,并在安装目录下打开客户端redis ...

  9. Zeu.js

    一个生成各种 GIF 动画的 JavaScript 类库,非常适合用于让你的数据展示变得更加地生动.使用起来也非常简单,有数据展示需求的同学可以尝试一下.https://shzlw.github.io ...

  10. Yii1自定义 CGridView 中的操作按钮中 CButtonColumn 选项

    Yii可以使用CButtonColumn自定义按钮及列样式. 效果展示 <?php $this->widget('zii.widgets.grid.CGridView', array( ' ...