搞了好久,终于把sass搞定了。

最开始,我是想使用koala来实现对sass的实时编译的,但是每当我保存的时候,总是弹出erro错误,即无法编译生成css文件,百度了半天,问了好久,这个问题还是没能解决了,还希望能有个哥哥姐姐不吝指导我一下。。

下面我给大家介绍一下,如何使用sublime插件实现对scss文件的编译的吧。

首先,你想要使用sass的话,就必须依赖于ruby环境。所以,你要下一个ruby。具体的链接应该是(http://rubyinstaller.org/downloads)。下载相应的版本。建议大家不要使用谷歌浏览器,因为他真得加载不出来。

下载好之后,就需要一步步进行安装了(建议大家把其安装在c盘),这里需要注意的是:

这个勾别忘了选,因为不选中,就会出现编译时找不到Ruby环境的情况。

这时,我们在控制台输入ruby -v就可以得到我们的安装好的ruby的版本号等信息

Ruby 安装完成后,在开始菜单中找到新安装的 Ruby,并启动 Ruby 的 Command 控制面板,如下图所示:

当你的电脑中安装好 Ruby 之后,接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。给大家提供一种最实用的方法。

到 Rubygems(http://rubygems.org/) 网站上将 Sass 的安装包(http://rubygems.org/gems/sass)下载下来,然后在命令终端输入:

gem install <把下载的安装包拖到这里>

直接回车即可安装成功。

接下来,就是在sublime中安装sass插件和sass build插件了,打开我们的sublime

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

sublime text3

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 Pacage,

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

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

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

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

这是你把scss文件写完之后,按ctrl+b就可以实现sass文件的编译了,他会生成一个自动编译生成css文件。这里,再跟大家介绍一下windows7下解决中文乱码的问题吧。需要做的就是:

找到ruby的安装目录,里面也有sass模块,如这个路径: 
C:/Ruby/lib/ruby/gems/1.9.1/gems/sass-3.3.14/lib/sass 
在这个文件里面engine.rb,添加一行代码Encoding.default_external = Encoding.find(‘utf-8’) 放在所有的require XXXX 之后即可.

如何在sublime中使用sass的更多相关文章

  1. 如何在sublime中安装使用eslint

    1:首先你需要全局安装eslint npm install -g eslint 安装完成后在控制台 输入 eslint -v 有版本号说明就可以在npm中使用了,可以检查语法的错误处,但还不能在sub ...

  2. 如何在sublime中使用sftp

    在开发中我们通常会遇到一个问题——如何通过一款编辑器(或者IDE)便捷的同步线上代码.目前比较热门的编辑器有sublime,atom等,他们都有sftp功能,鉴于本人更喜欢用轻量级的编辑器,那我就在这 ...

  3. 如何在Sublime中打开左侧文件夹导航

    Sublime中我们可以通过菜单栏的View->Side Bar->Hide Side Bar(Show Side Bar)来显示和隐藏左侧的导航栏,如下图所示. 但是,这里只会显示当前打 ...

  4. 如何在vue中使用sass

    使用sass,我们需要安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --sav ...

  5. 如何在sublime中调试html文件

    一.安装View In Browser插件 快捷键 Ctrl+Shift+P(菜单栏Tools->Command Paletter),输入 pcip选中Install Package并回车,输入 ...

  6. Sublime中开发Ruby

    Ruby:Sublime中开发Ruby需要注意的Encoding事项 目录 背景Sublime相关默认的文件存储编码:UTF8默认的输出控制台编码:UTF8修改默认的输出控制台编码Ruby相关默认的代 ...

  7. sublimeText3 中配置sass环境,并将编译后文件保存到指定文件夹

    sass基于ruby引擎,所以安装时ass.compass之前需要安装ruby.具体的链接应该是(http://rubyinstaller.org/downloads).下载并安装相应的版本,勾选第二 ...

  8. Ruby:Sublime中开发Ruby需要注意的Encoding事项

    背景 最近在用Sublime作为开发环境学习Ruby,本文就记录一下Ruby和Sublime在编码方面的问题. Sublime相关 默认的文件存储编码:UTF8 Sublime文件默认存储编码为UTF ...

  9. create-react-app脚手架中配置sass

    本文介绍如何在react中配置sass 首先将你的文件名称改成scss结尾的文件 然后安装依赖 cnpm install sass-loader node-sass --save-dev 找到node ...

随机推荐

  1. (二)Python是一门什么样的语言?

    在学习python是一门什么样的语言之前首先需要知道什么是编译和解释? 编译器是把源程序的每一条语句都编译成机器语言,并保存成二进制文件,这样运行时计算机可以直接以机器语言来运行此程序,速度很快; 而 ...

  2. 话说Angularjs的$resource模块

    上一篇中讲到使用$http同服务器进行通信,但是功能上比较简单,AngularJS还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互. 安装 n ...

  3. sw代码问题

    1.环境版本问题,myeclipse 配 jdk1.7  不能用jdk1.8 :jdk1.6满足不了代码本身 报错为:The type java.io.ObjectInputStream cannot ...

  4. Kattis -Bus Numbers

    Bus Numbers Your favourite public transport company LS (we cannot use their real name here, so we pe ...

  5. http缓存与cdn相关技术

    阅读目录 一 http缓存 二.Http缓存概念解析 三.cdn相关技术 摘要:最近要做这个主题的组内分享,所以准备了一个星期,查了比较多的资料.准备的过程虽然很烦很耗时间,不过因为需要查很多的资料, ...

  6. lua调用C语言

    在上一篇文章(C调用lua函数)中,讲述了如何用c语言调用lua函数,通常,A语言能调用B语言,反过来也是成立的.正如Java 与c语言之间使用JNI来互调,Lua与C也可以互调.   当lua调用c ...

  7. angular-ui-bootstrap插件API - Pager

    Pager: 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head&g ...

  8. css3 box-reflect 倒影效果

    语法: box-reflect:包括3个值. 1. direction 定义方向,取值包括 above . below . left . right. above: 指定倒影在对象的上边 below: ...

  9. LCT

    一个LCT看了一天了,但是很多地方还是理解的很模糊,简单谈一下理解. LCT支持的是对于森林的分裂.合并,以及查询节点的连通性等操作. 对于这片森林来说,它是由一坨树组成的,对于每一棵树,我们采用类似 ...

  10. 第33届 MPD软件工作坊(南京站)有哪些亮点值得我们参加?

    MPD软件工作坊由msup2010年创办,自创办以来,共吸引了万名的软件从业者到场参与.第33届 MPD软件工作坊(南京站)将于12月17-18日在南京召开,大会报名平台:活动家! 快捷报名通道:ht ...