准备工作

在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. php-memcache基本用法

    //create a memcache object        $mem = new Memcache(); //create connection        $mem->connect ...

  2. openshift 容器云从入门到崩溃之八《日志聚合》

    日志可以分为两部分 业务日志 业务日志一般是要长期保留的,以供以后有问题随时查询,elk是现在比较流行的日志方案,但是容器日志最好不要落地所以不能把logstash客户端包在容器里面 可以使用logs ...

  3. Ocelot:API网关概要

    一.概要 Ocelot是.Net Core下一个开源API网关:Ocelot主要目标是在.NET在微服务或面向服务架构中提供统一的入口服务, Ocelot拿到HttpRequest对象到管道后,先创建 ...

  4. centos7.5图形界面与命令行界面转换

    查看当前状态下的显示模式: # systemctl get-default 转换为图形界面: # systemctl set-default graphical.target 转换为命令行界面: # ...

  5. Painter's Problem （高斯消元）

    There is a square wall which is made of n*n small square bricks. Some bricks are white while some br ...

  6. noip单词接龙

    看了许多题解都好长啊,自不量力的来贴一下代码 (震惊于这都能ac...) 这道题的思路是先从字符串中找有重部分然后直接比较剩下的部分,比较的数据也可以用来计算数值 其实满水的题 总之看注释啦(竟然能耐 ...

  7. ci 配置ckeditor + ckfinder 无图片上传按钮

    一:配置路径有问题 {$base_url}assets/js/editor/ckfinder/ckfinder.html  --> http://www.cnblogs.com/assets/j ...

  8. 输出UTF-8-BOM格式的文件

    File localDir = new File(localPath); if(!localDir.exists()){ localDir.mkdirs(); } File file = new Fi ...

  9. FractionallySizedBox

    import 'package:flutter/material.dart'; void main() { runApp(MaterialApp(home: new MyApp())); } clas ...

  10. 7.24-Codeforces Round #494 (Div. 3)

    链接:http://codeforces.com/contest/1003 A. Polycarp's Pockets 题型:模拟 题意:把初始集合拆分,要求相同的数不在同一个集合中,求出需要的集合个 ...