准备工作

在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. Win7升Windows10有获取通知,但是就不推送的解决方法

    1. 删除“C:\Windows\SoftwareDistribution\Download”下所有文件2. 以管理员身份运行命令提示符,输入“wuauclt.exe /updatenow”并回车(注 ...

  2. MongoDB "$" 字符 下标位置

    我们可以修改列表里面元素的名字 例如: 修改age=34的数据,hobby里面的"足球"改为"网球" }) { "_id" : Object ...

  3. java框架之SpringBoot(5)-SpringMVC的自动配置

    本篇文章内容详细可参考官方文档第 29 节. SpringMVC介绍 SpringBoot 非常适合 Web 应用程序开发.可以使用嵌入式 Tomcat,Jetty,Undertow 或 Netty ...

  4. unity 安装破解提示partern not found和tutorials学习

    1.破解安装问题:unity 安装破解提示partern not found 可能和安装了多个版本有关,删除了c下的unity目录也没有解决,试着重新安装也不能破解, 破解的软件的方式是生成lisen ...

  5. vue 之iview

    iView-admin2.0:https://admin.iviewui.com/ 组件:https://www.iviewui.com/docs/guide/install

  6. sed command

    https://blog.csdn.net/solaraceboy/article/details/79272344

  7. 18 os/os.path模块中关于文件/目录常用的函数使用方法 （转）

    os模块中关于文件/目录常用的函数使用方法 函数名 使用方法 getcwd() 返回当前工作目录 chdir(path) 改变工作目录 listdir(path='.') 列举指定目录中的文件名('. ...

  8. EasyUI表格DataGrid格式化formatter用法

    1.通过HTML标签创建数据表格时使用formatter <!DOCTYPE html> <html> <head> <meta charset=" ...

  9. Windwos Live Writer插件指南

    Windows Live Writer 即(WLW) 是一个免费的桌面应用程序,可以用于发布博客. 官网下载地址:https://www.microsoft.com/zh-CN/download/de ...

  10. java329 继承、类的高级概念