Sublime Text 3 通过插件将 Sass 编译为 CSS 文件

当前位置: 首页 » 记录 » Sublime Text 3 通过插件将 Sass 编译为 CSS 文件

分类: 记录 1,049阅读阅读模式

Ruby 安装

因为 Sass 依赖于 Ruby 环境,所以装 Sass 之前先确认装了 Ruby 。

先去官网下载个 Ruby。

在安装的时候,请勾选 Add Ruby executables to your PATH 这个选项,添加环境变量,不然以后使用编译软件的时候会提示错误。

如图:

安装路径建议不要更改,点击 Install 开始安装。

Sass 安装

安装完 Ruby 之后,在 Window 的开始菜单中,找到刚才我们安装的 Ruby,名称叫 Start Command Prompt with Ruby ,或者打开命令提示符

输入 ruby -v 测试版本是否存在,有,则说明安装 Ruby 安装成功。可以继续操作

如图:

能正确输出版本号,表示可以用 Ruby 了。

继续,在命令行中输入:

  1. gem install sass

按回车键确认,等待一段时间就会提示你 sass 安装成功。

如果你喜欢 bate 版本(测试版),则输入:

  1. gem install sass --pre

由于是国外的资源,安装过程如果失败也是有可能的。

如果安装失败,参考最后面给出的步骤,修改镜像地址为国内淘宝镜像,成功安装则忽略。

 

你还可以从 Sass 的 Git repository 来安装,Git 的命令为

  1. git clone git://github.com/nex3/sass.git
  2. cd sass
  3. rake install

上方三个步骤表示为:1、克隆线上的到本地,2、进入克隆的本地文件夹,3、执行安装

如果你的 Sass 版本过低,需要升级Sass,则输入以下命令

  1. gem update sass

查看是否成功安装 Sass ,输入 sass -v ,成功输出 Sass 版本号表示成功。

如图所示:

 

Sublime Text 3 的 Sass 相关插件安装

调出控制台, Preferences -> Package Control

或者按快捷键调出:Ctrl+Shift+P (Linux/Windows) 或 Command+Shift+P (OS X)

如图:

 

点击 Install Package 会弹出插件框。

 

输入 Sass ,在候选框中点击 Sass 文件,静等安装成功。

等待过程中,软件右下角提示(Loading repositories [ = ]):

温馨提示:那个 = 号一直在来回晃动,在晃动表示还在安装中。

说明:该插件功能为让 Sublime Text 支持 Sass 语法;

 

同理,安装 Sass Build ,静等成功。

安装成功后,编译 Scss 文件路径,Tools -> Build,也可以按快捷键 CTRL + B 编译。

编译成功后,同级目录生成 .css.css.map 两个文件。

说明:该插件功能为让 Sublime Text 能编译 Scss 文件。

 

建议安装,SublimeOnSaveBuild。

每次修改完毕后,都要编译一次,有没有一种,我保存立刻就自动编译的插件来代替繁琐的编译步骤?有!就是这个插件,保存即编译

说明:该插件表示,我很吊,我能保存就立刻给你编译出来。

 

修改为淘宝镜像源

由于国内网络原因,这时候我们可以通过 gem sources 命令来配置源,先移除默认的 https://rubygems.org 源,然后添加淘宝的源 https://ruby.taobao.org/

  1. gem sources --remove https://rubygems.org/
  2. gem sources -a https://ruby.taobao.org/

某些系统不支持 https 协议的,请将淘宝源更换成:

  1. gem sources -a http://gems.ruby-china.org

 

完毕!

参考:

https://github.com/jaumefontal/SASS-Build-SublimeText2

https://segmentfault.com/a/1190000003855415

http://www.w3cplus.com/sassguide/install.html

http://www.tuicool.com/articles/eA3UVbI

 

 

 

相关文章

评论一下

暂无评论