VS Code 安装sass插件
准备工作
在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插件的更多相关文章
- Sublime Text 3编译Sass - Sublime Text安装Sass插件
1.首先要安装sass,安装流程: http://www.w3cplus.com/sassguide/install.html 2.sublime text安装Package Control(已经安装 ...
- 前端工具HBuilder安装Sass插件
HBuilder自带未安装的less插件,但是sass插件却没有,需要自己安装,步骤如下: 1.安装sass,参考: http://www.w3cplus.com/sassguide/install. ...
- 解决Visual Code安装中文插件失败问题
早已听闻Visual Code的大名,今日一用,果然不同凡响. 只不过,我的常用开发环境是不联网的,需要离线安装Visual Code和扩展插件. 以前要安装插件只能从VsCode里装,想离线安装比较 ...
- VS Code 安装 LeetCode 插件
练习算法绕不开的一个网站就是力扣,很多小伙伴为了拿到大厂 offer,刷题都刷到吐了. 然而如果直接在 LeetCode 上写代码,那是很痛苦的一件事,那就相当于用 txt 写代码一样,没有 IDE ...
- vs code安装leetcode插件
vs code 安装不成功啊 1.首先确保有node.js 10+,没有的话去官网下载,安装就可以,安装好之后在cmd命令行中输入: node -v 若出现相关版本信息说明安装成功 2.由于leetc ...
- VS Code安装yo(Yeoman) 插件下载.net core 模版代码开发
在安装插件以前,请看插件地址的相关依赖 Pre-requirements [Node.js] (https://nodejs.org) [npm] (https://www.npmjs.com) [Y ...
- Installing github.com/mdempsky/gocode FAILED ----vscode安装go插件中的一些坑
问题前景: 最近在使用vscode,编写一些go的代码,但发现调试的时候,会需要安装很多插件,但通过vscode之间安装的话,会出现如下的错误: Installing github.com/mdemp ...
- 解决vs code中golang插件依赖安装失败问题
解决vs code中golang插件依赖安装失败问题 Installing github.com/nsf/gocode SUCCEEDED Installing github.com/uudashr/ ...
- Sass环境安装-Sass sublime 编辑器插件编译方法
首先官网(http://www.ruby-lang.org/en/downloads/)下载 ruby (1)打开链接进入到下载页面,点击如下位置进行下载 (2)下载页面 (3)进入到各个版本的列表页 ...
随机推荐
- spring boot maven META-INF/MAINIFEST.MF
unzip -p charles.jar META-INF/MANIFEST.MF https://blog.csdn.net/isea533/article/details/50278205 htt ...
- Linux 安装python3.7.0
我这里使用的时centos7-mini,centos系统本身默认安装有python2.x,版本x根据不同版本系统有所不同,可通过 python --V 或 python --version 查看系统自 ...
- python框架之Flask(6)-flask-sqlalchemy&flask-script&flask-migrate使用
整合SQLAlchemy 安装 pip3 install flask-sqlalchemy 简单使用 from flask import Flask from flask_sqlalchemy imp ...
- Java 基础 IO流(转换流,缓冲)
一,前言 在学习字符流(FileReader.FileWriter)的时候,其中说如果需要指定编码和缓冲区大小时,可以在字节流的基础上,构造一个InputStreamReader或者OutputStr ...
- SpringMVC控制器方法参数传入的ModelMap 和Model类型有啥区别
参考 http://blog.csdn.net/u013067598/article/details/69372309 http://blog.csdn.net/u013686993/article/ ...
- python调用RPC接口
要调用RPC接口,python提供了一个框架grpc,这是google开源的 rpc相关文档: https://grpc.io/docs/tutorials/basic/python.html 需要安 ...
- 第二章:python基础,数据类型
"""第二章:python基础,数据类型2.1 变量及身份运算补充2.2 二进制数2.3 字符编码每8位所占的空间位一个比特,这是计算机中最小的表示单位.每8个比特组成一 ...
- mysql日期操作
一.获取当前日期时间 1.1.获得当前日期+时间(date+time)函数:now() 1.2.获取当前日期+时间(date+time)函数:sysdate() 注:二者类拟,不同在于now()在执行 ...
- springmvc+hibernate在实体类中设置外键
1.表User id主键,username,password,dept... 表Attendence id主键,uid外键,time... @ManyToOne @JoinColumn(name = ...
- python的变量和简单的数据类型
决定学习python这门语言了,本人资质愚钝,只会把学到的东西记录下来,供自己查漏补缺,也可以分享给和我一样正在学习python语言的人,若在记录中存在什么错误,希望多多批评指正,谢谢. Python ...