10分钟学会如何用compass 和sass

   这几天被sass环境搞的很是不爽，原本是用gulp-sass来编译scss文件的，结果各类问题，其中的痛苦也只有我知道，因而下决心不要用gulp来搞sass了，想用compass来搞了，但是技术资料有限，百度又太渣，只好FQ了，发现有篇文章挺好，想和你们分享一下，本身也可以加深记忆，因而乎决定翻译一下，这是我头一次翻译文章，有点忐忑，毕竟英语太渣了。废话很少说，下面进入如何在10分钟以内用compass编译sass。

Sass和Compass可以为咱们作些什么？

   咱们能够用Sass和Compass在咱们的项目中输出css,它可以将.sass或者.scss文件编译成可读的css文件，由于有了compass 可以带来比css更大的方便，因此咱们再平常开发中都用到compass来编译成咱们要的css文件。

Compass是怎么工做的呢？

   在大多数的工程里，咱们都是将图片或者css等其它资源文件放在不一样的文件夹里，那么compass降会帮咱们管理咱们的sass或者scss文件，使他更好的工做。

   在一个compass工程里，有一个config.rb的配置文件，生成这个工程的时候，这个文件就被定义了，当须要编译的时候，compass就会去读这个文件。

.sass和.scss 有什么不一样呢

  其实只有语法不一样，你们能够经过这个连接去了解，这里就不说了，http://thesassway.com/articles/sass-vs-scss-which-syntax-is-better.

接下来就是咱们要作的事情了：

   下面的几个步骤将会让你明白如何去建立一个compass工程了。

•   在你的电脑上安装compass
•   运用这个test工程
•   观察compass的工做状态
•   建立你的.scss文件

一、在你的电脑上安装compass

     首先咱们先须要安装Ruby, 若是你工做在OS X，那么ruby已经安装了；若是你工做在windows环境，那你须要先下载ruby安装，下载地址：http://rubyinstaller.org/。安装的过程当中务必要选中“export Ruby executables to PATH”。

    安装ruby完成后，那么接下来咱们就能够开始安装compass了，打开dos环境，

  若是是windows环境 输入命令：

gem install compass

  若是是X环境 输入命令：

sudo gem install compass

二、 运用这个test工程

   compass安装完毕以后 咱们就能够开始咱们的工程了

   首先咱们再本地建立一个文件夹，名字叫compass-demo,而后咱们从这个地址：https://github.com/Gaya/Compass-Boilerplate/archive/master.zip去下载这个文件,压缩完成后将文件放在刚才建立的compass-demo这个文件夹下面。文件夹的结构就像下面这样：

assets是咱们这个工程的跟目录，一会咱们就会以此做为例子。compass这个目录就是咱们要去观察改变的目录，咱们还要注意礼貌的config.rb文件，它将是咱们用compass编译的关键。

三、compass开始变魔术了，看仔细了。

    咱们先须要告诉compass来观察咱们的工程，而后它才会去仔细观察哪一个文件发生了变化，在这个例子里咱们在sass文件夹里有一个style.scss文件，下面看如何操做。

   dos 环境下进入刚才工程的跟目录，也就是compass-demo/assets/compass,而后执行命令：

compass watch

  而后咱们会看到 ：>>>Compass is polling for changes.Press Ctrl -c to Stop。

四、开始你的第一个sass之旅。

  打开sass/style.scss文件，输入一下代码：

@import 'compass/css3';

.shadow {
    @include box-shadow(#000 5px 5px 5px);
}

保存文件。而后再打开assets/css/style.css文件，你是否是会看到如下代码：

/* line 3, ../compass/sass/style.scss */
.shadow {
  -moz-box-shadow: #000 5px 5px 5px;
  -webkit-box-shadow: #000 5px 5px 5px;
  box-shadow: #000 5px 5px 5px;
}

若是你看到了，那说明你成功了，你已经开始了一个comass+sass的工程了。

 

提醒一下 安装 compass 和sass 的时候有可能须要FQ，

另外，代码如有中文编译Sass 文件出现Syntax error: Invalid GBK character报错

解决办法是：找到ruby的安装目录，里面也有sass模块，如这个路径：C:\Ruby21-x64\lib\ruby\gems\2.1.0\gems\sass-3.4.13，在这个文件里面init.rb，添加一行代码：Encoding.default_external = Encoding.find('utf-8'),放在全部的require "..."以后便可。而后在每一个须要编译的有中文的scss文件头部加上@charset "utf-8";

以上即是简短的讲述如何开始compass+sass,还有不少的技术细节等着咱们去发现，顺便说一下，gulp-sass的吭太多了，把我坑惨了，不得不转向compass了，若是对你有帮忙，请帮点赞一下，英语原文出处：https://blog.gaya.ninja/articles/how-to-start-using-sass-and-compass-in-10-minutes/

还有一篇文章不错，顺便转一下：http://blog.jnecw.com/?p=660