[TOC]##為什么要學(xué)習(xí)Sass和Compass###簡單一來說晤碘，主要目標(biāo)： - 使用Sass和compass可以寫出更加優(yōu)秀的CSS - 可以解決CSS編寫過程中的一些痛點問題，如精靈圖合成sprite 等 - 能夠有效的組織樣式碍彭，圖片捞烟，字體等項目元素當(dāng)然前提是你要首先會寫CSS，要不然也不會寫出好的Sass和compass鳄哭，不過也不排除意外俩檬。###那么到底哪些人需要來學(xué)習(xí)sass和compass呢 - 擔(dān)任重構(gòu)工作的同學(xué)萎胰，寫很多CSS，不知如何自動化. - 前端JS工程師棚辽，希望在項目周期內(nèi)更好組織項目內(nèi)容技竟。##Sass的工作流程
sass工作流程
h1 color: #000 background: #fff;>.Scss語法h1{ color: #000; background: #fff;}注意：一個項目中可混合使用兩種語法，但不能在一個文件中使用兩種語法##Sass和compass安裝>由于Sass底層開發(fā)環(huán)境是由Ruby開發(fā)的遣妥，所以需要部署安裝Ruby進(jìn)行Sass的安裝和編譯使用擅编，下面介紹一下Ruby的安裝。注意：這里說明一點箫踩，由于中國網(wǎng)絡(luò)的限制爱态，一般Ruby的安裝是需要翻墻的，具體怎么翻境钟，相信大家都有自己的方法锦担，網(wǎng)上也可以搜到很對，這里就不做介紹了###Ruby的安裝登錄Ruby的官方網(wǎng)站http://www.ruby-lang.orrg/en/進(jìn)行下載安裝慨削，可以下載Mac,Linux,Windows 版本洞渔，這里講一下Windows版本的安裝，其他操作系統(tǒng)類似缚态。> 安裝Ruby,選擇文件目錄磁椒，注意添加Ruby的執(zhí)行程序到你安裝的路徑中。
這里寫圖片描述
Ruby -v這里同樣由于網(wǎng)絡(luò)原因玫芦，需要將Amazon上的Ruby資源路徑換成國內(nèi)淘寶Ruby資源路徑>執(zhí)行gem sources --remove https://rubygems.org/ //移除原來資源文件gem sources -a https://ruby.taobao.org/ //換成淘寶資源###安裝Sass和文件創(chuàng)建gem install sass同時可以指定sass安裝版本號3.3gem install sass --version=3.3卸載指定版本gem uninstall sass --version=3.30新建一個名為learn-sass-cli的文件mkdir learn-sass-cli //創(chuàng)建文件cd learn-sass-cli/ //進(jìn)入文件目錄echo off >main.scss //新建main.scss文件sass main.scss mian.css //將main.scss文件編譯成main.css文件打開main.scss文件浆熔，輸入簡單的全局設(shè)置樣式*{ margin: 0; pading: 0;}編譯生成的文件目錄如下所示
這里寫圖片描述
gem install compasscompass -v //查看版本號創(chuàng)建workspace工作文件mkdir workspacecd workspace/compass create learn-compass-init //創(chuàng)建compass文件實時監(jiān)聽文件變化cd learn-compass-init/compass watch
這里寫圖片描述
這里寫圖片描述
