VSCode下让CSS文件完美支持SCSS或SASS语法方法

superPershing 发布于2019-08-30 13:57 / 3860人阅读

摘要：下让文件完美支持或语法方法习惯后通常都是直接对文件进行处理但是大部分习惯的朋友也许不适应了我专门研究了一下在编辑器下如果配置相关代码和设置达到文件完美编写的办法其他语法类型原理相似这里以为例开始配置编辑器设置的配置首先配置编辑器的设置按快捷

VSCode下让CSS文件完美支持SCSS或SASS语法方法

习惯Webpack + PostCSS后, 通常PostCSS都是直接对CSS文件进行处理, 但是大部分习惯SCSS/SASS/LESS的朋友也许不适应了. 我专门研究了一下, 在Visual Studio Code编辑器下如果配置相关代码和设置达到CSS文件完美编写SCSS的办法, 其他语法类型原理相似, 这里以SCSS为例.

开始配置 Visual Studio Code编辑器设置的配置

首先, 配置编辑器的设置, 按快捷键"CTRL + ,"打开用户设置, 添加如下配置片段:

"files.associations": {
  "*.css": "scss"
}

我这里做了全局的用户设置, 因为我个人大部分情况下是写SCSS, 当然如果你仅对该项目配置, 也可以将上面这段放进工作区设置(是放在默认花括号内哦, 千万不要弄错了~).

这样, VSCode编辑器就会把所有CSS文件当成SCSS格式来解析了, 也就不会出现可怕的红色波浪线了.

PostCSS的配置

接下来, 对PostCSS进行相关配置. 我们这里需要安装最重要的两个PostCSS插件postcss-scss和precss. 执行命令:

npm i -D postcss-scss precss

安装好后, 修改项目的postcss.config.js配置如下(我另外有用到autoprefixer和cssnano, 当然你可以根据个人情况选择, 重要部分是parser: "postcss-scss"和require("precss")):

module.exports = {
  parser: "postcss-scss",
  plugins: [
    require("precss"),
    require("autoprefixer"),
    require("cssnano")
  ]
}

这样问题就解决了. 试着编译一下以下测试代码:

/* css文件用scss语法测试 */
$blue: #056ef0;
.test {
  display: flex; // 这是scss注释
  color: $blue;
  .box {
    flex: 1;
  }
}

编译后:

.test{display:-webkit-box;display:-ms-flexbox;display:flex;color:#056ef0}.test .box{-webkit-box-flex:1;-ms-flex:1;flex:1}

Tips: 我用了cssnano, 因此注释被自动去除, 如果需要保留, 需参阅cssnano文档进行相关配置.

结语

至此, 我们的编辑器和项目都对CSS文件下编写SCSS有了很好的兼容. 至于其他用SASS和LESS的朋友可以举一反三, 安装对应的插件和修改VSCode设置. 整个操作过程应该花不了十分钟, 以后就能愉快的在CSS文件上面写SCSS啦~ 关于本次测试的代码可以访问postcss study查看.

如果文中有误, 或者还有什么疑问欢迎留言~

题外

如果有人还不是很清楚SCSS和Sass的区别可以阅读Intro to SCSS for Sass Users

postcss-scss插件到底做了什么? 据我观察, 行注释会被转换成标准的CSS块注释, 而其他的作用还尚未理解, 下面是官方描述:

This module does not compile SCSS. It simply parses mixins as custom at-rules & variables as properties, so that PostCSS plugins can then transform SCSS source code alongside CSS.

关于Webpack + PostCSS环境如何搭建的, 需要哪些依赖包, 大家可以直接看我的前文提到过的DEMO项目

关于PostCSS我也才用不到一年, 感觉确实很方便, 几乎可以替代SCSS了, 比如, 以前做项目需要引入第三方插件CSS, 而自己用的是SCSS, 那么Webpack解析就需要两个规则匹配. PostCSS的插件也是非常的丰富, 经过几年的发展, 很多插件为开发工作带来很好的便利. 例如移动端适配的px转rem单位的插件postcss-pxtorem, 我这里也有个完整的DEMO, 提供给大家参考~

云服务器 GPU云服务器对象不支持属性或方法目录名或卷标语法不正确支持css3 ios11完美支持webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115667.html

vscode常用插件【全了】

摘要：插件集待补充。。。同时，它还包含了用于转换为格式和生成数据模式的选项用于压缩合并和文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为文件的选项。修改文本的更多命名格式，包括驼峰命名下划线分隔命名，命名以及命名等切换漂亮的主题插件集待补充。。。 20180903 文件【Path Intellisense】自动补全路径浏览器【Open-In-Browser】在...

kyanag 2019-08-30 13:57 评论0 收藏0
vscode常用插件【全了】

摘要：插件集待补充。。。同时，它还包含了用于转换为格式和生成数据模式的选项用于压缩合并和文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为文件的选项。修改文本的更多命名格式，包括驼峰命名下划线分隔命名，命名以及命名等切换漂亮的主题插件集待补充。。。 20180903 文件【Path Intellisense】自动补全路径浏览器【Open-In-Browser】在...

xcc3641 2019-08-26 11:42 评论0 收藏0
前端开发VScode常用插件

摘要：名称功能自动闭合标签自动提示修改标签时，自动修改匹配的标签格式化编写更加人性化的注释添加行书签的浏览器兼容性检查运行选中代码段支持大量语言，包括单词拼写检查在中弹出浏览器并搜索，可编辑搜索引擎颜色值在代码中高亮显示小窗口显示颜色值，等等拾色名称功能 Auto Close Tag 自动闭合HTML标签 Auto Import...

hellowoody 2019-08-21 18:21 评论0 收藏0
VS Code配置及插件推荐

摘要：宋体以像素为单位控制字号。将其设置为可隐藏窗格。是否已启用自动刷新是否启用自动拉取以像素为单位控制终端的字号，这是的默认值。要求工作区使用高于版本的。用户设置打开文件 > 首选项 > 用户设置(U)，（忽略覆盖工作区提示） { // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。 editor.tabS...

wpw 2019-08-20 14:42 评论0 收藏0