sass 转换为 css

一、下载安装Ruby http://www.ruby-lang.org/en/downloads/

• where ruby 查看安装位置
• ruby -v 查看安装版本

安装sass

打开ruby终端 包管理工具 gem

• `gem -v’
• gem install | uninstall sass
• sass -v
• gem update sass
• sass --watch index.scss:index.css 本地编译修改.scss文件会同步到对应的.css；静态文件HTML中仍然是通过link引入css文件。

二、vscode中使用easysass插件

1. 安装插件
2. setting > workspace > open settings.json 添加如下配置

{
  // easy sass插件
  "easysass.formats": [
    {
      // 压缩格式
      "format": "compressed",
      "extension": ".css"
    }
  ],
  // 自定义css输出文件路径为当前路径
  "easysass.targetDir": "./"
}

一般开发环境中会用到上面其中两个设置项

• easysass.formats[i].format支持四个选项用以编译生成对应风格的css：
  1. nested: 嵌套缩进的
  2. expanded: 没有缩进的扩展的css代码
  3. compact: 简洁格式的
  4. compressed: 压缩后的
• easysass.targetDir 设置css输出路径，可以是绝对路径 / 相对路径

ss.targetDir 设置css输出路径，可以是绝对路径 / 相对路径