搭建结合sublime编辑器的本地sass编译环境的搭建

最近进行的项目中,需要用到sass来编写css,但本身开发的环境又不是基于node的开发环境,所以要借助sublime来将scss编译成css。

1.ruby环境的搭建

sass的编译是基于ruby的环境的,所以首先要安装rubyrudy官网
这里直接下载Ruby 2.4.2-2 (x64) 这种格式的安装包就了(根据你的系统而定,实在太慢或者下不了就找找网上其他的,原谅笔者的惰性~~),安装的时候记得点击Add Ruby executables to your PATH,直接添加到环境变量中。好了之后,测试一下是否成功,使用如下命令

ruby -v

正常的话就会看到提示的版本

sass的安装

进入到ruby安装目录的bin文件夹下,如:D:Ruby23-x64bin,shift+右键开启命令窗口,输入

gem sources --remove https://rubygems.org/ 移除当前的默认的ruby源
gem sources -a http://gems.ruby-china.org/ 使用淘宝的镜像源 网上的其他方法均不行,除非翻墙
gem install sass  安装sass

最后等待安装提示就可以了。。 输入如下命令,查看版本

sass -v

接下去的事就是安装sublime的编译插件了,

package control ==> install package

输入sass 找到sass 和 sass-build 安装就可以了,
最后找到

tools ==> 编译系统 ==> sass

这样就可以快乐的撸代码了 记得 编译是 ctrl+ B
注意sass有以下模式:
sass(展开输出方式 expanded)
sass(compressed )压缩输出方式 compressed 生产环境当中一般使用这个

以上文章 参考如下
http://www.w3cplus.com/sassgu...
http://www.cnblogs.com/xiangr...

相关推荐