sublime-sass 安装配置

第一步、安装ruby环境

1. Sass依赖于ruby环境，所以装sass之前先确认装了ruby。
   可以到 Ruby 的官网下载对应需要的 Ruby 版本。
   https://rubyinstaller.org/
   
   image.png

安装过程中，请注意，勾选 Add Ruby executables to your PATH 选项，可以保证在系统中添加好环境变量，防止之后在编译软件中发生找不到ruby环境的错误。另，安装地址无特殊要求。

检查ruby是否安装成功
打开 Start Command Prompt with Ruby
输入 ruby -v
安装成功会显示版本
ruby自带gem包 其他插件可以通过gem包去安装

第二步 安装sass

gem install sass
因为众所周知的网络问题，如果没有安装成功，可以利用淘宝的RubyGems镜像安装sass。

第三步 添加环境变量

右键 我的电脑（此电脑），选择 属性，高级（高级系统设置），环境变量，编辑PATH，将自己的ruby/bin地址新建进去，如：C:\Users\lt\Downloads\Ruby200-x64\bin

image.png

第四步：sublime中安装相关插件

安装 Packages
需要下载三个插件：
Sass
Sass Build 使用 Ctrl + B 快捷键编译
SublimeOnSaveBuild 用于 Ctrl + S 保存文件的时候自动编译

配置生成css路径/去掉map文件
Tools -> Build System -> New Build System
新建自己的编译系统,复制粘贴下面代码

{

  "cmd": ["sass", "--watch", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache", "--style=compressed", "--sourcemap=none"],

  "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

  "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

  "windows":
    {
        "shell": "true"
    }

}

保存到Sublime Text3 Packages的默认安装目录下的，\Sublime Text 3\Data\Packages\User中，保存文件名toCSS。

注意：根据目前版本的sublime来设置，你在此步保存的默认文件夹就是，保存的时候请注意，保存的文件名不要添加任何后缀名，默认的文件类型，就选默认的json
然后编译的时候选择自己刚刚保存的编译系统

相关注释
默认编译路径
"$file:${file_path}/${file_base_name}.css"
修改为
"$file:${file_path}/../css/${file_base_name}.css"

默认编译路径
""--style=compressed" 输出压缩css模式

Predawn主题

一款为Sublime和Atom打造的暗色主题，可以定义Tab的大小，SideBar大小，Find栏大小，为Markdown高亮着色，并提供主题同款的ICON。

image.png