想想學(xué)習(xí)Sass時(shí)間也有差不多一年的光景了。在這一年來(lái)的時(shí)間中，在GitHub不斷閱讀Sass相關(guān)的源碼。也在國(guó)外涉獵了相關(guān)的知識(shí)，也讓自己初步掌握了一些Sass一些基礎(chǔ)知識(shí)與技能，當(dāng)然也讓自己喜歡上了Sass，并且在國(guó)內(nèi)致力于Sass的推廣。希望各多的前端開發(fā)者喜歡上Sass，也希望Sass能真正為前端人員帶來(lái)好處。
最近看到越來(lái)越多的同學(xué)在學(xué)習(xí)和使用Sass，感到非常的高興，終于有更多的同行朋友加入到這個(gè)行列。同時(shí)也看到了很多同學(xué)了解了Sass，掌握了一些Sass技術(shù)，但就是不知道如何結(jié)合到項(xiàng)目中。那么今天，我就想和大家一起探討一下如何在項(xiàng)目中使用Sass。
為什么要在項(xiàng)目中使用Sass
聽到最多的一句話就是我會(huì)CSS，我能使用CSS寫項(xiàng)目，為什么我要花時(shí)間去學(xué)習(xí)Sass，一個(gè)自己并不了解的東西，一個(gè)對(duì)于自己來(lái)說(shuō)是全新的東西？看到這樣的問(wèn)題，讓我想起了2010年討論CSS3的時(shí)候，很多同學(xué)同樣有這樣的凝問(wèn)，CSS3真的會(huì)來(lái)？我真的要學(xué)習(xí)CSS3？現(xiàn)在，時(shí)間證明了一切。我還是想說(shuō)，很多東西并不是需要的時(shí)候才去學(xué)，機(jī)會(huì)是給有準(zhǔn)備的同學(xué)。
似乎有些離題了，我們還是回到今天的話題中來(lái)，為什么要在項(xiàng)目中使用Sass？在此，我僅想說(shuō)說(shuō)我個(gè)人的一些看法。
首先,CSS能完成的事情，Sass一樣能完成，而且可能更好的完成，另外CSS做不到的事情，卻有很多Sass能做到，比如：
- Sass可以定義變量，混合宏，%placeholder；
- Sass可以定義函數(shù)；
- Sass可以使用@if、@fore、@while這樣的控制指令；
- Sass可以使用JSON數(shù)據(jù)(map)；
當(dāng)然，除了這些基本功能之外，在項(xiàng)目中使用Sass，還可以讓你更好的維護(hù)項(xiàng)目，擴(kuò)展項(xiàng)目，復(fù)用項(xiàng)目等。還能讓你的代碼更簡(jiǎn)潔。
說(shuō)到這里，還有一種聲音在說(shuō)，小項(xiàng)目有必要使用Sass？試問(wèn)，項(xiàng)目有大小之分嗎？既然Sass能幫助我們更好的開發(fā)、管理、維護(hù)項(xiàng)目，那么為什么只允許在大項(xiàng)目中使用Sass，而不能在小項(xiàng)目中使用呢？難道小項(xiàng)目就需要維護(hù)嗎？不需要管理嗎？帶著這樣的問(wèn)題，往下閱讀，或許你會(huì)有些改觀。
怎么在項(xiàng)目中使用Sass
說(shuō)了這么多，同學(xué)們更為關(guān)心的是怎么在項(xiàng)目中使用Sass。并不太在意Sass有多好。因?yàn)檫@樣的爭(zhēng)論也實(shí)在是沒有太多的意義。那么我們就不說(shuō)其他的，就說(shuō)怎么在項(xiàng)目中使用Sass吧。
經(jīng)過(guò)在項(xiàng)目中使用Sass，我自身有一些看法，或者說(shuō)我的操作方式吧。也當(dāng)是經(jīng)驗(yàn)吧，希望對(duì)初學(xué)者有所幫助。
創(chuàng)建運(yùn)行Sass的環(huán)境
要想在項(xiàng)目中正常使用Sass，你得先保證你的電腦上能運(yùn)行Sass的環(huán)境。這也是Sass受限，也是不被大家愛戴的原因之一。很多人討論使用Sass，需要先安裝Ruby環(huán)境。對(duì)于不喜歡命令編譯的同學(xué)，還需要安裝GUI編譯器。
其實(shí)安裝Sass環(huán)境也并不是件難事，就好比配Wamp環(huán)境，整完一次就OK了。但就是這么第一次的安裝，給初學(xué)者帶來(lái)很多的障礙，也成了同學(xué)們學(xué)習(xí)Sass和使用Sass的攔路虎。如果你只是想學(xué)習(xí)或者了解Sass的話，可以不用在本機(jī)上安裝Sass，你可以借助在線編輯器，比如：SassMeister、CodePen。而且他們都支持即寫即所得。如果你對(duì)Sass已有一定的基礎(chǔ)，想在項(xiàng)目中使用，已是蠢蠢欲動(dòng)了，那你還是離不開在電腦中安裝Sass環(huán)境。至于如何在電腦上安裝Sass，在這篇文章中就不做過(guò)多的闡述，感興趣的同學(xué)可以閱讀下面的文章：
- Sass安裝
- Sass編譯
- Sass調(diào)試
- Install Sass
- INSTALLING SASS AND COMPASS UBUNTU 12.10 & 13.04
- Setting Up Sass on Windows
- How to install Sass with Compass on Windows
- How to install SASS with Compass – Windows 7 step by step guide
我想根據(jù)上面的教程介紹，在你的電腦上安裝Sass不會(huì)是件難事。不過(guò)在我們天朝，有些東西被墻了，時(shí)常讓你安裝Sass不成功。在這里給大家介紹一個(gè)簡(jiǎn)單的方法：
假設(shè)你已成功安裝好了Ruby。先將Sass下載到本地。并打開你的命令終端：
gem install
此時(shí)先不要回車，將你下載下來(lái)的Sass安裝包，用鼠標(biāo)拖到"install"后面，此時(shí)你在命令終端，可以看到：
gem install /Users/airen/Downloads/sass-3.3.14.gem
這個(gè)時(shí)候再回車，這樣就OK了。為了確認(rèn)是否安裝成功，只面要輸入:
sass -v
如果能看到Sass版本號(hào)，就表示你已成功安裝了。接下來(lái)你就可以做你想做的事情了。
注：不同的系統(tǒng)，不同的用戶和版本，對(duì)應(yīng)相關(guān)路徑和信息都會(huì)不一樣“/Users/airen/Downloads/sass-3.3.14.gem”。
創(chuàng)建公用的Sass項(xiàng)目模板
在做項(xiàng)目時(shí)，不管什么項(xiàng)目，他們之間總是有一些可以共用的部分。比如說(shuō)重置樣式、公用樣式、模塊組件、UI庫(kù)等。那么在Sass項(xiàng)目中也是如此。為了避免在每個(gè)項(xiàng)目中做一些相同的事情，那么你可以在你的電腦上創(chuàng)建一個(gè)公用的Sass項(xiàng)目模板。比如我創(chuàng)建的：
在這樣的一個(gè)模板中，每個(gè)Sass目錄下的文件夾都對(duì)應(yīng)著各種分類的_xxx.scss
文件：
- base： 放置一些基本樣式的SCSS文件，比如重置樣式_normalize.scss，基本樣式_base.scss，文本排版樣式_typography.scss等
- components：放置一些公用組件，比如：按鈕_buttons.scss、表單_form.scss、表格_tables.scss、選項(xiàng)卡_tabs.scss等
- helps：放置一些輔助功能性文件，比如：_css3.scss、_variables.scss、_mixins.scss、_helpers.scss和_function.scss等
- layout：放置一些跟頁(yè)面布局相關(guān)的，比如：_layout.scss、_header.scss、_footer.scss、_sidbar.scss等
- pages:放置跟具體項(xiàng)目頁(yè)面相關(guān)的樣式文件。
- themes：對(duì)于一些有前后臺(tái)頁(yè)面，或者需換膚的項(xiàng)目，就可以將相關(guān)文件放置在這里。
- vendors：引用的外部插件或者框架的SCSS文件，比如_bootstrap.scss、_foundation.scss。
- style.scss: 這是主樣式文件，最終編譯，就編譯這個(gè)問(wèn)題。當(dāng)然根據(jù)項(xiàng)目大小，可做一些其他處理。比如說(shuō)針對(duì)不同的頁(yè)面,創(chuàng)建不同的page_xxx.scss文件。
當(dāng)然每個(gè)人或許會(huì)有不同的方式方法。創(chuàng)建好了這樣的一個(gè)模板之后，以后只要有新項(xiàng)目，就可以復(fù)制、粘貼，然后修改項(xiàng)目名稱，這樣就即可。
不過(guò)，對(duì)于一些公共使用的部分，還是盡量在公用模板中修改。比如說(shuō)你添加的混合宏mixin、占位符%placeholder、函數(shù)功能function。還有就是一些公用的組件。
或許這樣復(fù)制并不方便，那是否可以考慮像Compass這樣的框架，自己寫一個(gè)可安裝的功能呢？或者將公用的部分，引用到你所有需要的項(xiàng)目中？不過(guò)這兩種方法，我都沒有嘗試過(guò)。其一，自己不會(huì)寫那種帶有g(shù)em
安裝功能的東東，其二，沒有單獨(dú)試過(guò)在不同的項(xiàng)目中使用相對(duì)路徑調(diào)用資源。如果您嘗試過(guò)，記得與我們一起分享。
組織Sass項(xiàng)目
其實(shí)就是將公用的這個(gè)當(dāng)作是一個(gè)Sass項(xiàng)目，只不過(guò)這個(gè)Sass項(xiàng)目是用來(lái)做備用的，可以無(wú)限制的復(fù)用。那么在創(chuàng)建這樣的一個(gè)項(xiàng)目時(shí)，就需要合理的組織，便天后期的使用。
早前翻譯過(guò)John W. Long的一篇文章：如何組織一個(gè)Sass項(xiàng)目。上面的文件組織結(jié)構(gòu)的思路就是來(lái)源于此。當(dāng)然，大家還可以參考一些大型Sass框架做為參考：
Compass
除此之外，還有：
Sass項(xiàng)目的編譯與調(diào)試
具備上述之后，你在具體編寫Sass的時(shí)候，還需要掌握Sass的編譯和調(diào)試。眾所周知，在項(xiàng)目中具體引用的是.css文件而不是.scss或者.sass文件。所以你要將寫好的Sass編譯成需要的CSS。對(duì)于如何編譯？其實(shí)方法很多種，你要是喜歡使用命令，你可以直接在命令終端編譯，如果你不喜歡命令編譯，你還可以使用GUI這樣的界面工具輔助編譯。具體的可以閱讀：
除此之外，你要是對(duì)Node,Grunt和Gulp熟悉，你還可以使用他們幫你編譯Sass。比如《Nodejs+Grunt配置SASS項(xiàng)目自動(dòng)編譯》一文所介紹。
至于如何調(diào)試，前端開發(fā)人員都知道可以使用Firebug這樣的工具來(lái)調(diào)試CSS。其實(shí)使用Sass的同學(xué)，也非常期待能在Firebug下直接調(diào)試Sass。那么現(xiàn)在在Chromet和Firefox瀏覽器都支持了Sass的Soucemap功能，可以直接在瀏覽器中調(diào)試相應(yīng)的Sass。如下面的幾篇文章所言：
Sass在項(xiàng)目中的實(shí)戰(zhàn)
說(shuō)了這么多，我們還是以一個(gè)實(shí)例來(lái)做示例吧，這樣形象一些。假設(shè)收到這樣一個(gè)項(xiàng)目：
在“后臺(tái)”和“前臺(tái)”各對(duì)應(yīng)了一些設(shè)計(jì)圖。這些我們并不需要太多關(guān)心，他們長(zhǎng)成什么樣子。先將創(chuàng)建好的公用Sass項(xiàng)目復(fù)制一份，并將其粘貼到你本地項(xiàng)目環(huán)境中，修改成你需要的項(xiàng)目名，比如我這里將其稱為“tuhaokuai”。
拋棄其他因素不看，僅看"sass"目錄，Sass公用項(xiàng)目和新項(xiàng)目“tuhaokuai”長(zhǎng)得是一模一樣。當(dāng)然，在里面會(huì)不一樣的。主要在pages
目錄中，針對(duì)所需的頁(yè)面創(chuàng)建了不同的頁(yè)面文件：
如此一來(lái)，針對(duì)不同的頁(yè)面，添加其對(duì)應(yīng)的樣式代碼，比如：
_index.scss
_mysite.scss
其他文件就不一一展示了，看上去是不是非常清楚。其實(shí)簡(jiǎn)單點(diǎn)說(shuō)，這些東西就是一些零件，我們要讓項(xiàng)目樣式生效，就需要把需要的零件裝上去，然后固定他。這樣就好了。在這個(gè)項(xiàng)目中，由于他并不太復(fù)雜，只使用了一個(gè)主樣式：style.scss
。并且將需要的東西通過(guò)@import
引入進(jìn)來(lái)：
此時(shí)你只需要將style.scss編譯成style.css，引用到你的項(xiàng)目就行了。
其實(shí)你也可以按照你自己的需求去組裝，假設(shè)，首頁(yè)我只需要首頁(yè)用到的樣式，那么你完全可以創(chuàng)建一個(gè)index.scss的SCSS文件，然后將需要的引入進(jìn)來(lái)：
接下來(lái)，在index.html引用編譯出來(lái)的樣式文件index.css
即可（文件名你可以換成自己想要的）。
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
作者：大漠 日期：2014-08-08
原文：http://www.w3cplus.com/preprocessor/how-to-create-project-with-sass.html
