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