钉子の次元

Dimpurr – an artist, designer and developer from China.

Win 下配置 Sublime Text 的 SASS 插件

SASS是一门著名的CSS预处理器语言,而 Sublime Text 则堪称界面最优雅的编辑器之一。为ST配置了SASS的插件之后,便可以在ST中很方便的支持SASS的语法高亮以及一键编译。

CSS预处理器即在CSS语法里加入编程中的变量、循环、调用等结构,再将其编译成普通的CSS文件。目前主流的预处理器有实时编译的 LESS 和预编译的 SASS ,在语法部分也有一些区别,个人认为SASS更加强大一些。关于SASS的更多详细介绍在此不再赘述,若想了解请参见 SASS用法指南 。

SASS需要Ruby环境的支持,因此首先要下载并安装对应版本的 Ruby Installer for Windows 。然后在开始菜单中启动 Start Command Prompt with Ruby ,在弹出的命令行界面中输入:

gem install sass

随后会开始SASS的安装。如果提示 HTTP 302,可能是GEM被墙的问题,请在 Internet 选项 中挂上代理重试。

安装完成后启动 Sublime Text ,如果已经安装了 Package Control 插件请忽略这一步,否则使用 工具 > 命令面板 或者快捷键 Ctrl + Shift + P 调出 Console ,在控制台中输入:

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

这样就成功安装了插件管理器,如果失败,也可以直接下载 Package Control 将下载后的Package Control.sublime-package 放到 Sublime Text 根目录下的 Installed Packages 文件夹中。

再次打开控制台,选择 Package Contrl: Install Package ,依次搜索并回车安装 Sass 和 SASS Build 两个插件。

安装成功后,.scss文件就可以正常使用代码高亮国。如果文件名后缀是.css,也可以在控制台中搜索SASS选择 Set Syntax: SASS 以切换模式。可以使用 工具 > 编译 或者快捷键 Ctrl + B 编译文件,会自动在当前目录生成一个同名的编译后的CSS文件。

  1. Jacob说道:

    编译的时候提示编码错误,但编码明明是UTF-8的,请问你知道是什么回事吗