安装sass以及如何在sublime里使用

想要使用sass的话,就必须依赖于ruby环境。css

第一步,下载ruby

点开下载ruby的连接html

clipboard.png

下载好以后,就须要一步步进行安装了(建议你们把其安装在c盘)sass

安装过程当中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。
ok,安装完毕!ruby

打开cmd面板,输入 ruby -v能够看到ruby的版本号说明安装成功。app

clipboard.png

第二步,安装 Sass

Ruby自带一个叫作RubyGems的系统,用来安装基于Ruby的软件。咱们可使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass,你须要输入下面的命令:编辑器

//安装以下(如mac安装遇到权限问题需加 sudo gem install sass)
  gem install sass
  gem install compass

安装完成以后,应该经过运行下面的命令sass -v来确认应用已经正确地安装到了电脑中:函数

clipboard.png

第三步,安装sublime编辑器的sass插件和sass build插件

打开sublimeui

首先你要看的是在preference选项下有没有package control这个选项,若是没有的话,就表示你没有Package Control 插件(一个方便 Sublime text 管理插件的插件),这时,你就要从菜单 View - Show Console 或者 ctrl + ~ 快捷键,调出 console。将如下 Python 代码粘贴进去并 enter 执行,不出意外即完成安装编码

sublime text3url

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

sublime text2

import urllib2,os; 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( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

完成了这步以后,再从新打开咱们的sublime,按住ctrl+shift+p,并输入install,选择第一个Install Package,

clipboard.png

在命令栏中输入"Sass"而后回车,而后在弹出的列表中选择Sass插件,经过鼠标单击或者回车进行安装,可经过左下角状态栏查看安装结果

在命令栏中输入"SassBuild"而后回车,而后在弹出的列表中选择SassBuild插件,经过鼠标单击或者回车进行安装,可经过左下角状态栏查看安装结果

按ctrl+shift+p,输入package,选择list packages,就看到了咱们安装的插件列表

clipboard.png

clipboard.png

若是你看到了sass和sass bulid就说明插件安装成功了。

而后尝试着写一个scss文件,写完以后,按ctrl+b就能够实现sass文件的编译了,会生成一个自动编译生成css文件。

但很不幸个人sublime出现了一个报错[Decode error - output not utf-8]

第四步,解决sublime的编码报错

sublime text有时运行会输出如下错误信息:

[Decode error - output not utf-8]或者[Decode error - output not gbk]

错误信息意思就是脚本输出的信息不是某种指定编码。

用如下方法解决,有点麻烦,要有耐心,别弄错了哦!

1.在sublime text的安装目录下的Packages目录下找到Default.sublime-package,将这个复制出来,将后缀更名为zip.

它就是个zip文件,解压缩它,而后将其中的exec.py文件放到sublime text的DataPackagesUser目录下。

2.打开exec.py文件,找到类ExecCommand的append_data函数,在如下位置添加代码(能够把这段函数的代码替换就行了):

def append_data(self, proc, data):  
 if proc != self.proc:  
     # a second call to exec has been made before the first one  
     # finished, ignore it instead of intermingling the output.  
     if proc:  
         proc.kill()  
     return  

 #add start  
 is_decode_ok = True;  
 try:  
     str = data.decode(self.encoding)  
 except:  
     is_decode_ok = False  
 if is_decode_ok==False:  
     try:  
         str = data.decode("gbk")  
     except:  
         str = "[Decode error - output not " + self.encoding + " and gbk]\n"  
         proc = None  

 # Normalize newlines, Sublime Text always uses a single \n separator  
 # in memory.  
 str = str.replace('\r\n', '\n').replace('\r', '\n')  

 self.output_view.run_command('append', {'characters': str, 'force': True, 'scroll_to_end': True})

其原理就是在解码输出文字编码出错时再使用gbk试试,至关于utf-8和gbk两种编码都试试,这样能够解决编码错误的问题。

OK啦,我安装的时候就出现这些问题了。能够开始使用sass啦~~哈哈哈哈~

下面提供我参考的文章,若是还有其余问题能够仔细阅读一下。
https://www.sass.hk/install/(sass中文网)
http://shashanzhao.com/archiv...(解决编码报错)
http://www.cnblogs.com/qqqian...(sublime安装sass插件)

相关文章
相关标签/搜索