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)进入到各个版本的列表页 ...
随机推荐
- SharePoint 命令行
网站集备份: Backup-SPSite http://sp2013 -Path C:\sp.bak 网站集还原: Restore-SPSite http://sp2013/sites/dyzx -P ...
- 【UML】NO.55.EBook.8.UML.3.001-【UML和模式应用 第3版】
1.0.0 Summary Tittle:[UML]NO.54.EBook.8.UML.3.001-[UML和模式应用 第3版] Style:DesignPattern Series:DesignPa ...
- MFC 的资源文件 就是那个后缀名是 .rc的那个
参考: http://blog.csdn.net/zgrjkflmkyc/article/details/16897881 http://www.oschina.net/question/565065 ...
- Javascript根据id获取数组对象
在业务中,列表页跳转详情页时,经常会将Id值传入,然后再根据id值异步获取数据. 假设有服务端的json数据: <注意,这里的data是指已经从后端获取的json, 而非后端原始的文件> ...
- 屏幕适配(UGUI)非UI
using UnityEngine; public enum Suit_UIType { Background, Effect, } [RequireComponent(typeof(Transfor ...
- day02 Python列表的增删查改及常用操作
列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li = [‘alex’,12 ...
- JavaScript 原型链学习(四)原型链的基本概念、原型链实现继承
简单回顾一下构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.那么,假如我们让原型对象等于另一个类型的实例,结果会 ...
- Shell egrep
1.egrep是grep命令的扩展.grep使用需要脱义字符“\”.-E也可以满足. 2.正则参数. (). #任意一个任意字符. ()? #0或1个前面的字符. ()+ #1或多次的前面字符. () ...
- while 运算符 初始编码 python2和python3的区别
1.while 循环 2.运算符 3.初始编码 4.python2 和python3的区别 1.while循环: 关键词:while[循环] break[跳出循环] c ...
- 【HBase调优】Hbase万亿级存储性能优化总结
背景:HBase主集群在生产环境已稳定运行有1年半时间,最大的单表region数已达7200多个,每天新增入库量就有百亿条,对HBase的认识经历了懵懂到熟的过程.为了应对业务数据的压力,HBase入 ...