sublime Text3下sass环境配置(windows)

导语:

由于准备学习 Sass,并且我习惯使用sublime编辑器,折腾了下sublime下如何配置 sass,记下遇到的坑,有什么问题欢迎交流。

一、安装Ruby环境

  1. Sass依赖于ruby环境,所以装sass之前先确认装了ruby。可以到 Ruby 的官网下载对应需要的 Ruby 版本。
  2. 安装注意
    sublime Text3下sass环境配置(windows)_第1张图片
    145516gbsqvgff9e8xxevc.jpg
  3. 安装成功,输入ruby -v,可以看到:
sublime Text3下sass环境配置(windows)_第2张图片
搜狗截图20170322131210.png

二、安装Sass

  1. 通过终端命令安装 Sass。
  • 打开电脑的ruby命令终端,输入下面的命令: gem install sass
  • 提醒一下,在使用 Mac 的同学,可能需要在上面的命令前加上"sudo",才能正常安装:sudo gem install sass
  • 上面的方法一般是能安装成功的,但是墙的厉害,所以我是使用淘宝镜像安装的
  • 淘宝镜像安装法:(ruby终端下输入命令)

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https,请将淘宝源更换成:gem sources -a http://gems.ruby-china.org】
$ gem sources -l
$ gem install sass

  • 成功后如图:


    sublime Text3下sass环境配置(windows)_第3张图片
    搜狗截图20170322133832.png

三、Sublime下安装Sass和Sass Build

打开sublime,键入快捷键Ctrl+Shift+P,在 install package 下找到Sass和Sass Build,安装。成功后在 package control:list package 下能看见

sublime Text3下sass环境配置(windows)_第4张图片
搜狗截图20170322132457.png

四、结语

至此,安装已经完成,在sublime编辑器下创建.sass文件,保存后,快捷键Ctrl+B即可得到.css.css.map文件。

如果编译出错,可以尝试把后缀.sass改为.scss

五、相关资料

  • w3cplus
  • 前端网ruby安装
  • Sass教程

你可能感兴趣的:(sublime Text3下sass环境配置(windows))