20190423-Vscode与Sass不得不说的秘密(>^ω^<)

时间：2023-03-10 07:32:26
20190423-Vscode与Sass不得不说的秘密(>^ω^<)

这是乱七八糟的前言：emmm，今天倔强的点，是关于Vscode使用easySass插件时，不安装ruby环境，直接使用插件编译时，不进行设置，分音是会转译为Css文件的= =，神坑的后知后觉才发现是因为插件的问题，搞了近俩小时不止~

目录

1、easySass插件的默认用户设置

1.1文件》首选项》设置》settings.json全局配置文件

1.2默认用户设置

"easysass.compileAfterSave": true,

//保存scss/sass文件后自动编译

"easysass.excludeRegex": "",

//提供文件名正则表达式，匹配到的文件会被排除，不会编译为css，默认为空，则功能关闭

"easysass.formats": [

    {

      "format": "expanded",

      "extension": ".css"

    },

    {

      "format": "compressed",

      "extension": ".min.css"

    }

],

//编译不同风格的css
1.easysass.formats[i]format用以编译生成对应风格的css，参数值
nested：嵌套缩进的 css 代码。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的 css 代码。
compressed：压缩后的 css 代码。
2.easysass.formats[i]extension用以设置编译输出的文件拓展名
此处可以自定义文件名，输出的 css 文件名会按照“当前 Sass 文件名（不含拓展名）+此处自定义文件名”的格式来生成

例如：设置 "easysass.formats[i].extension": ".min.css"，假设当前的 Sass 文件名为

style.scss，则编译输出的 css 文件名为 style.min.css
"easysass.targetDir": ""
很多情况下 scss/sass 文件和 css 文件是不在同一个目录下的，而 Easy Sass 默认输出的 css 是和当前 Sass 文件处于相同目录的
为此我们需要通过该参数来配置输出路径

1.3更改用户设置

在相同路径下的CSS文件夹内生成：
"easysass.targetDir": "./css",
Sass分音导入设置：
"easysass.excludeRegex": "^_",

2、分音导入还是需要加下划线

emmm，用VScode的easySass是不需要装ruby环境的┓( ´∀` )┏真是喜大普奔，不过，emmm分音时还是要记得更改用户设置，以及导入时千万记得加上下划线_，不然会报找不到文件夹的错误！

参考文献：

使用VScode来编译Sass

随机推荐

  1. ASP.NET Core在CentOS上的最小化部署实践

    引言        本文从Linux小白的视角, 在CentOS 7.x服务器上搭建一个Nginx-Powered AspNet Core Web准生产应用. 在开始之前,我们还是重温一下部署原理,正 ...

  2. WebGL展示3D房屋内景

      原文地址:WebGL展示3D房屋内景   由于生活和工作上的原因,从年前开始一直到处奔波,没有太多的时间去关注和学习WebGL图形学相关的技术, 不过陆陆续续都有学习使用blender进行3D建模 ...

  3. 『Zap Möbius反演』

    Zap Description FGD正在破解一段密码,他需要回答很多类似的问题:对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a ,y<=b,并且gcd(x,y)=d.作为F ...

  4. .NET Core微服务系列基础文章索引（目录导航Final版）

    一.为啥要总结和收集这个系列? 今年从原来的Team里面被抽出来加入了新的Team,开始做Java微服务的开发工作,接触了Spring Boot, Spring Cloud等技术栈,对微服务这种架构有 ...

  5. SQL Server内幕之数据页

    数据页是包含已添加到数据库表中的用户数据的结构. 如前所述, 数据页有三种, 每个都以不同的格式存储数据. SQL server 有行内数据页.行溢出数据页和 LOB 数据页. 与 SQL serve ...

  6. 六大设计原则（二）LSP里氏替换原则

    里氏替换原则LSP(Liskov Subsituation Principle) 里氏替换原则定义 所有父类出现的地方可以使用子类替换并不会出现错误或异常,但是反之子类出现的地方不一定能用父类替换. ...

  7. 折腾Java设计模式之解释器模式

    解释器模式 解释器模式是类的行为模式.给定一个语言之后,解释器模式可以定义出其文法的一种表示,并同时提供一个解释器.客户端可以使用这个解释器来解释这个语言中的句子. 意图 给定一个语言,定义它的文法表 ...

  8. 19,CSS 滤镜

    1.Filter 属性介绍 2.Alpha 滤镜的使用 3.Blur 滤镜的使用 4.Filph.Filpv 滤镜 5.DropShadow 滤镜 6.Glow 滤镜 7.Gray ,Invert,X ...

  9. css对齐方案总结

    css对齐方案总结 垂直居中 通用布局方式(内敛元素和块状元素都适用) 利用flex:核心代码: 12345 .container{ display:flex; flex-direction:colu ...

  10. Oracle数据库升级注意事项

    1 备份配置参数 数据库升级前的配置参数要备份,如PGA大小 这样数据库升级后还可以升级前的配置,而不至于使用安装升级时的默认配置 2 检查版本兼容 确认数据库升级后是否对生产环境上的代码有影响,如果 ...

相关文章