VScode三个关于sass的插件

    .vscode-Sass------sass/scss文件语法提示。(sublime text也有)

    .vscode-Easy Sass------scss编译成css,min.css。(不错的一个sass编译工具)

    .vscode-Sass Formatter---------scss自动格式 缩进

下面是关于转载 sass 关于 VScode的一些配置

前端项目自然少不了和 Sass 打交道,VSCode 提供了丰富的相关插件来帮助我们处理 Sass 相关任务。我用的是 Easy Sass 这款插件,目前最新版本是 0.0.6。

由于 Sass 的编译依赖 Ruby 环境,因此我们在开始之前首先得安装 Ruby,别担心,装 Ruby 只是为了提供运行环境,不懂 Ruby 没任何关系。官网下载传送门

安装 Ruby 时一定要勾选 Add Ruby executables to your PATH,用来将 Ruby 添加到系统变量,这样后续可以省却很多不必要的麻烦。装好后在命令行输入 gem sass 来安装 Sass,安装完成后启动 VSCode,在拓展商店里搜索“easy sass”,并安装,安装成功后重启 VSCode。

接下来进行配置。在 VSCode 菜单栏依次点击“文件 首选项 设置”,打开 settings.json 全局配置文件。搜索“easysass”,然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中,再根据实际情况修改配置项。

一般生产环境中用到其中两个设置项(上图红框处中的代码):

  1.  
  2.  
    /** Easy Sass 插件 **/
  3.  "easysass.formats": [
  4.  {
  5.  "format": "compressed", // 压缩
  6.  "extension": ".css"
  7.  }
  8.  ],
  9.  "easysass.targetDir": "./" // 自定义css输出文件路径

其中 easysass.formats 是设置编译输出的 css 风格的,可以同时编译输出多个不同风格的 CSS 文件,此处我只设置了一个 easysass.formats 项目,所以编译时只生成一个 CSS 文件。

easysass.formats[i].format 支持四个选项用以编译生成对应风格的 CSS:
   nested:嵌套缩进的 css 代码。
   expanded:没有缩进的、扩展的css代码。
   compact:简洁格式的 css 代码。
   compressed:压缩后的 css 代码。
easysass.formats[i].extension 顾名思义就是设置编译输出的文件名了,此处可以自定义文件名,输出的 CSS 文件名会按照“当前 Sass 文件名(不含拓展名)+此处自定义文件名”的格式来生成。例如:设置 easysass.formats[i].extension 为 ".min.css",假设当前的 Sass 文件名为“style.scss”,则编译输出的 CSS 文件名为“style.min.css”。

我们的生产环境中,在很多情况下 Sass 文件和 CSS 文件是不在同一个目录下的,而Easy Sass 默认输出的 CSS 是和当前 Sass 文件处于相同目录的,为此我们需要配置输出路径。

easysass.targetDir 提供 CSS 输出路径的设置,值可以是绝对路径或相对路径。例如:设置 easysass.targetDir 为 "./css/",此时保存修改完毕的 Sass 文件,VSCode 会自动编译并在当前 Sass 文件的上级文件夹 css 目录下输出生成 CSS 文件(见下图)。

本文所述的只是采用 VSCode 编辑器编译生成 CSS 的一种方式,可能比较原始,实际生产环境中大多采用自动化构建方案,比如 grunt、gulp、fis 等。

作者: WingMeng 
链接:http://www.imooc.com/article/19624
来源:慕课网
本文原创发布于慕课网 ,转载请注明出处,谢谢合作!

关于sass与VScode 一些配置 学习记录的更多相关文章

  1. shiro 权限集成 sessionManager 配置 学习记录(三)

    1.shiro配置文件增加sessionManager管理 <!-- 6.shiro结合Session会话管理器 start --> <bean id="sessionMa ...

  2. shiro 权限集成Ehcache 配置 学习记录(二)

    1.加入依赖 <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-eh ...

  3. shiro 集成spring 配置 学习记录(一)

    首先当然是项目中需要增加shiro的架包依赖: <!-- shiro --> <dependency> <groupId>org.apache.shiro</ ...

  4. Linux防火墙配置学习记录

    一.iptables基本原理 1.iptables是一个管理内核包过滤的工具,包含4个表,5个链 表和链被称为Netfilter模块的两个维度, 表提供特定的功能内置四个表: filter表:用于对数 ...

  5. Spring学习记录(九)---通过工厂方法配置bean

    1. 使用静态工厂方法创建Bean,用到一个工厂类 例子:一个Car类,有brand和price属性. package com.guigu.spring.factory; public class C ...

  6. 在vscode中配置sass savepath

    1.先在VSCode上面安装插件:Live Sass Compiler 2.创建好scss文件夹文件和css文件夹 3.然后在VSCode的控制台上打开Live sass watching模式(控制台 ...

  7. VsCode[Git] | 配置Gitee和Github | 不使用全局用户名和邮箱

    (VsCode[Git] | 配置Gitee和Github | 不使用全局用户名和邮箱 | 2021-04-11) 目录 一 .安装Git / VsCode配置Git / Win10系统 二.Git配 ...

  8. Quartz 学习记录1

    原因 公司有一些批量定时任务可能需要在夜间执行,用的是quartz和spring batch两个框架.quartz是个定时任务框架,spring batch是个批处理框架. 虽然我自己的小玩意儿平时不 ...

  9. Apache Shiro 学习记录4

    今天看了教程的第三章...是关于授权的......和以前一样.....自己也研究了下....我觉得看那篇教程怎么说呢.....总体上是为数不多的精品教程了吧....但是有些地方确实是讲的太少了.... ...

随机推荐

  1. 微服务架构 - 巧妙获取被墙的Docker镜像

    在国内由于种种原因,有些Docker镜像直接是获取不到的,特别是k8s中的一些镜像.本人在部署k8s中的helm组件时需要获取tiller镜像,如果直接用如下命令: docker pull gcr.i ...

  2. Docker最全教程之使用 Visual Studio Code玩转Docker(二十)

    前言 VS Code是一个年轻的编辑器,但是确实是非常犀利.通过本篇,老司机带你使用VS Code玩转Docker——相信阅读本篇之后,无论是初学者还是老手,都可以非常方便的玩转Docker了!所谓是 ...

  3. python3的变量作用域规则和nonlocal关键字

    也许你已经觉得自己可以熟练使用python并能胜任许多开发任务,所以这篇文章是在浪费你的时间.不过别着急,我们先从一个例子开始: i = 0 def f(): print(i) i += 1 prin ...

  4. Nuget(BagGet)使用教程

    Nuget(BagGet)使用教程 1. 服务器安装ASP.NET Core 网上有很多教程,不多讲,链接给你:https://www.cnblogs.com/Agui520/p/8331499.ht ...

  5. 衡量GDP,哪种夜间灯光数据更靠谱?

    <新科学家>杂志报道,随着经济发展,一些国家通常会新修道路,扩展居民区,这两项措施都会使从太空中看到的灯光强度增加.不少学者利用夜间灯光数据与国内生产总值统计数据进行比较,发现从太空中看到 ...

  6. 关于RecyclerView嵌套导致item复用异常,界面异常的问题

    常规需求: 外层RecyclerView嵌套内层RecyclerView , 在上下滑动的时候会出现item数据以及view的显示异常. 解决办法: 1.重写  getItemViewType  方法 ...

  7. 不同数据库的表迁移SqlServer

    INSERT INTO table  SELECT *  FROM  OPENDATASOURCE ('SQLOLEDB', 'Data Source=172.168.44.146;User ID=s ...

  8. Liunx-cd命令

    1. 如何进入上级目录cd .. 2. 如何进入当前用户主目录cd ~3. 如何进入上两级目录cd ../.. 4. 进入当前目录命令cd .5. 如何进入目录  /lym/b 6.切换跟目录

  9. Windows Server 2016-DHCP增删功能介绍

    动态主机配置协议(DHCP)是一种客户端/服务器协议,可自动为Internet协议(IP)主机提供其IP地址和其他相关配置信息,例如子网掩码和默认网关.RFC 2131和2132将DHCP定义为基于引 ...

  10. Linux iptables用法与NAT

    1.相关概念 2.iptables相关用法 3.NAT(DNAT与SNAT) 相关概念 防火墙除了软件及硬件的分类,也可对数据封包的取得方式来分类,可分为代理服务器(Proxy)及封包过滤机制(IP ...