zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    lincode 题目记录5
    lintcode题目记录4
    lintcode 题目记录3
    lintcode 题目记录2
    剖析ASP.NET Core(Part 2)- AddMvc(译)
    剖析ASP.NET Core MVC(Part 1)- AddMvcCore(译)
    如何 RESTFul 你的服务(译)
    Windows + IIS 环境部署Asp.Net Core App
    Asp.Net Core 缓存的使用(译)
    [转载].NET Core 轻量级模板引擎 Mustachio
  • 原文地址:https://www.cnblogs.com/nightnight/p/10758457.html
Copyright © 2011-2022 走看看