虽然PostCSS才是未来,但是Sass成熟稳定,拥有一大波忠实的使用者,及开源项目,且最近Bootstrap 4 alpha也从Less转到Sass了。所以了解Sass还是非常有必要的。
基于快速开发及效率,我开发环节习惯通过编辑器插件来完成Less/Sass编译,这样可以快速定位、修复Bug。
下面介绍一款Sublime Text的插件SASS build system for Sublime Text 2可以在编辑器完成Sass编译。名字是2但Sublime Text 3可用无压力。
安装Sass
首先要安装Ruby和Sass,详细可参考:http://www.w3cplus.com/sassguide/install.html 或者网上大把教程
Sublime Text安装Sass Build插件
1. 安装 Package Control Plugin
打开:View > Show Console
输入:
Sublime Text2
import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
Sublime Text3
import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
详见:https://packagecontrol.io/installation#st3
2. 安装 Package Control Plugin
Ctrl+Shift+P (Linux/Windows) 或Command+Shift+P (OS X),然后输入'install'会看到Package Control: Install Package并选择。
等待列表出来,输入Sass会看到SASS Build System选择安装。
安装完成后,Ctrl+B (Linux/Windows) or Command+B (OS X)可编译Sass为CSS,还会有一个.map文件。
更多详细见官方:https://github.com/jaumefontal/SASS-Build-SublimeText2
最后,如果编译失败,或许就是中文目录的问题,改成英文目录再试下。
分享到:
相关推荐
SublimeText模板插件SublimeText模板插件SublimeText模板插件SublimeText模板插件SublimeText模板插件SublimeText模板插件SublimeText模板插件SublimeText模板插件SublimeText模板插件SublimeText模板插件Sublime...
Sublime Text3 插件包(包含前端大部分常用插件,绝版插件)。 解决 Package Control 网站被墙后,无法下载插件,像LESS2CSS等插件 Package Control都无法搜索到了。 插件包列表: All Autocomplete,AutoFileName,...
Sublime Text 手动安装方式的GBK插件
sublimeText3插件安装 Package Control 的安装与使用方法
Sublime Text3 配置编译运行C语言Sublime Text3 配置编译运行C语言
Sublime Text 2 插件安装与配置,常用插件功能说明
Sublime Text2 的CSS3前缀自动补全插件,点击Sublime下的Preferen ——> Browse Packages,将压缩包解压后的文件复制到打开的文件夹下,重启Sublime即可。
sublime text markdown插件,支持事实预览。
sublime text 3插件包是一款为文本编辑器提供的插件工具包,包含的插件有: AndyJS2、BracketHighlighter、emmet-sublime、flatland、IMESupport、jQuery、JsFormat、Package Control、predawn、PyV8、SideBar...
解决Sublime Text乱码问题,解压文件,修改文件夹名称为“ConvertToUTF8”,将给文件夹存放到Sublime Text 2\Data\Installed Packages目录下,启动Sublime Text 2,打开乱码文件 按下ctrl+shift+c即可解决
Sublime text emmet插件下载,安装命名请自行百度。放到相应的目录下即可
直接覆盖sublime的配置文件夹
sublime text2 的插件包 包含了常用的插件,比如zen coding、BracketHighlighter、JsFormat等。
AceJump 是 Sublime Text 2/3 插件,让你随心所欲地跳转,完全脱离鼠标。 标签:AceJump
st3用浏览器打开,SublimeCodeIntel-master代码自动完成,SublimeFileDiffs-master比较文件的不同,Sublime-HTMLPrettify-master代码格式化,SublimeLinter-for-ST2-1.8.0,SublimeText-Nodejs-master,SublimeTmpl-...
已经破解汉化过,主流热门主题和插件也已经预装完成
然后删除这个文件夹中已有的”Package Control文件夹”,将刚才自己下载好的并且重新命名的Package Control复制到该文件夹下,然后重新启动Sublime,这样便可以使用Package Control来安装其他插件了。
sublime text 3 插件 cssrem
sublime-text-git, 一些git集成到 sublime text的插件 sublime-text 插件:gitGit集成:非常方便。 谁知道?有关支持什么以及如何安装的更多信息,请查看 wiki 。安装包控制安装这一简单的方法是使用包控制插件。...
sublime-perfectionist-威力 Sublime Text 插件, 美化 CSS 用