Sublime Text通过插件编译Sass为CSS及中文编译异常解决
虽然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
最后,如果编译失败,或许就是
中文
目录的问题,改成英文目录再试下。
编译异常处理
最后,如果编译失败,或许就是
中文
目录的问题,改成英文目录再试下。
还有一种情况是.SCSS里有中文注释也会引起编译失败,可参考下面方法解决:
找到Ruby安装目录如下文件,如:
D:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.16\lib\sass\engine.rb
打开
engine.rb
文件添加下面代码到各种
require 'sass/*'
后面即可Encoding.default_external = Encoding.find('utf-8');
转载请注明出处:http://www.cnblogs.com/givebest/
最新文章
- storm0.9.5集群安装
- PostCSS一种更优雅、更简单的书写CSS方式
- Linux下不同机器之间拷贝文件
- International Conference for Smart Health 2015 Call for Papers
- RSA加密前端JS加密,后端asp.net解密,报异常
- [Java解惑]数值表达式
- mailx 乱码,sendmail发html邮件,脚本开机启动
- 12个非常不错的免费HTML后台管理模板
- java多线程学习笔记——简单
- [Hapi.js] Logging with good and good-console
- 0-ajax操作json(番外篇)
- jvm系列 (五) ---类的加载机制
- 初识Python,简单初学代码
- Linux 系统的用户和组
- git pull/fectch
- JS实现图片放大查看
- 【WePY小程序框架实战四】-使用async&;await异步请求数据
- python绘图之seaborn 笔记
- 201621123008 《Java程序设计》第四周学习总结
- 网络I/O模型--05多路复用I/O