vscode使用sass

• 首先：sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
  mac用户挺开心的。。。
• 安装sass：

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass

• 查看安装是否成功：

sass -v
Sass 3.x.x (Selective Steve)

• 打开vscode，插件商店里搜索:easysass,然后在settings.json设置里，把下面代码粘贴上去：

 "easysass.compileAfterSave": true, //自动编译
  "easysass.formats": [ //nested：嵌套缩进的 css 代码。
    //expanded：没有缩进的、扩展的css代码。
    //compact：简洁格式的 css 代码。
    //compressed：压缩后的 css 代码
    {
      "format": "expanded",
      "extension": ".css"
    },
    {
      "format": "compressed",
      "extension": ".min.css"
    }
  ],
  "easysass.targetDir": "css/",

• 创建目录如下：

  
  
  
  

  用的scss..请见谅。。。
  然后可以在scss/sass里面舒服地定义变量和嵌套了

    .header-top {
        @extend .flex;
        padding: 10px 0;
        input {
            width: 451px;
            height: 31px;
            outline: unset;
            padding: 0 10px;

        }
        img {
            margin-right: 20px;
        }
    }

然后control+s或者command+s会奇迹般得出现两个文件：

每保存一次就会自动编译一次

• 没了