使用vscode 编译 sass
时间:2019-06-12
本文章向大家介绍使用vscode 编译 sass,主要包括使用vscode 编译 sass使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
由于我在工作中用的编辑器是 vscode ,所以记录一下vscode 编译sass 的配置
vs code 编译saass
1.在扩展里搜索“easy sass”,直接进行安装即可
2.安装后默认已经做了配置,可以直接进行编译。
eg:新建一个后缀为.scss文件
修改保存后,自动生成了.css 和.min.css 两个文件
很多情况下我们在开发当中,sass 和css文件是两个不同的目录。所以这就需要做些特殊的配置。
vscode 中 Easy Sass 的配置
1. 点击Easy Sass 插件的“设置”按钮,如下图:
2. 选择“配置扩展设置”选项,进入到设置页面
3. 点击“在setting.json中编辑”进入settings.json文件
4. 根据需求进行配置即可
eg: 将sass目录下的.sass文件编译生成的文件放到css文件夹下,配置如下:
"easysass.formats": [ //nested:嵌套缩进的 css 代码。 //expanded:没有缩进的、扩展的css代码。 //compact:简洁格式的 css 代码。 //compressed:压缩后的 css 代码 { "format": "expanded", "extension": ".css" //设置编译输出的文件名 }, { "format": "compressed", "extension": ".min.css" //设置编译输出的文件名 } ], "easysass.targetDir": "./css/" //提供 css 输出路径的设置(可以是绝对路径或者相对路径)
页面中新建两个文件夹scss 和 css
demo.css 保存编译后,则将编译后的文件放到了指定的目录css文件夹下,如下图:
原文地址:https://www.cnblogs.com/yangkangkang/p/11010563.html
- 与机器学习算法有关的数据结构
- 32764端口后门重出江湖,影响多款路由器
- 安全科普:SQLi Labs 指南 Part 1
- Do You Kown Asp.Net Core - 根据实体类自动创建Razor Page CURD页面模板
- 2014上半年国内安卓银行应用隐私泄露和安全隐患研究报告
- Do You Kown Asp.Net Core -- Asp.Net Core 2.0 未来web开发新趋势 Razor Page
- Metasploitable2使用指南
- 在渗透测试中使用fuzz技术(附windows安装指南)
- 黑了记者:写个恶意软件玩玩(二)
- 开源BUG跟踪平台JIRA目录遍历漏洞分析
- 黑了记者:写个恶意软件玩玩(一)
- 使用 Python 工具 Locust 进行负载测试
- 玩转Google的XSS游戏
- iOS基于GPUImage的图像形变设计(简单形变部分)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- phpinfo无法显示的原因及解决办法
- 在php的yii2框架中整合hbase库的方法
- PHP安装memcache扩展的步骤讲解
- python退出循环的方法
- PHP crypt()函数的用法讲解
- Python如何自动获取目标网站最新通知
- PHP+mysql实现的三级联动菜单功能示例
- Python调用shell cmd方法代码示例解析
- 实例讲解PHP表单处理
- 用python实现名片管理系统
- keras 简单 lstm实例(基于one-hot编码)
- keras用auc做metrics以及早停实例
- Laravel中错误与异常处理的用法示例
- Laravel用户授权系统的使用方法示例
- Yii2结合Workerman的websocket示例详解