WIN7 系统安装 ruby 并使用 SASS

作者: Zion0707
发布时间:2015-07-07 15:34:30

前不久朋友跟我说 sass 写 css 很不错,我就试着去用了,在使用 sass 的时候发现安装也是要点时间,那么我就整理了一下这些安装和使用的一些东西,分享一下,让想用 sass 写 css 的同学少走一些安装弯路,在这里仅仅适合 Windows 下安装方式(Linux或OS X 请移步),好了废话不多说直接进入主题 (最下面附:新的应用软件 prepros 更方便编译SASS,无需安装SASS既可使用)

 

1. 先下载ruby程序包并安装 (这里安装的是 1.8.7 版本 ) 安装时请把下面三个框勾上,下载地址:http://dl.dbank.com/c0e1b2ptmk

 

 

2. 打开 Ruby 的命令符面板(ruby的黑窗口) 并输入 gem install haml(等待几秒钟会出现安装过程) 和 gem install sass

 

3. Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护。但是,只有搭配Compass,它才能显出真正的威力, 所以现在我们来使用 Compass 。打开命令行(系统的黑窗口)输入 gem install compass (其实这行命令应该可以在第二步的时候一起输入的,这里我就没 试了,有兴趣的同学可以去试一下)  在这里可以参考一下这个高手的博客 http://www.ruanyifeng.com/blog/2012/11/compass.html

 

4. 激动人心的时刻来了,接下来的事情就是在 E 盘(当然你可以选择你做项目的那个盘)创建一个文件夹我取名为 sass(文件名)

 

 

5.首先输出 E: 代表找到 E 盘 ,然后输出cd sass 代表找到sass文件夹,其中cd是一定要的,最后输出 sass>sass --watch style.scss:style.css  在sass文件夹下将style.scss转换为style.css 。sass --watch代表一直监听着style.scss 只要在编辑器上更新了scss就会自动更新style.css , 此时打开 E 盘目录下的sass文件你就会发现有一个 style.css 这个文件,这就是你刚刚创建的那个文件

 

 

6.在 scss 文件夹里新建一个 style.scss 文件,在项目使用中你就可以引用这个style.css文件了,而你编写的就是style.scss文件,这个 style.scss 文件就会更新(监视)这个 style.css 个文件

 

 

7.在 sublime text 中编写的 sass 代码不会高亮,那么需要一个插件在这个好人的博客里下载此插件 http://www.csssea.com/?p=1818 , 把下载好的插件解压,提取第二层文件(既下图所示)粘贴到 sublime text 的浏览程序包里面的 Emmet 文件里(记得粘贴到里面的文件,不要把文件覆盖,不然sublime text会出现问题),重启一下 sublime text 此时久违的感觉就回来了,接下来的事情就是尽情释放你的 sass 代码吧...

 

 

下面来介绍一种新的软件 Prepros , 简单易操作,跨平台

Prepros 是 Windows 上一个开源的程序可自动将 Less, Sass, Scss, Stylus, Jade, Coffeescript, Haml and Markdown 编译成 CSS、JS 和 HTML。

下载地址:https://prepros.io/

sublime SASS语法高亮插件: https://github.com/jaumefontal/SASS-Build-SublimeText2

其它编译软件:http://koala-app.com/(个人比较喜欢这个)

 

把要编写的sass文件夹和css文件夹拖动到Prepros 即可实时同步编译,对 Prepros 不作过多介绍,想了解更多自行百度~

 

标签: Ruby
来源:http://www.cnblogs.com/zion0707/p/3889633.html

推荐: