想想學(xué)習(xí)Sass時(shí)間也有差不多一年的光景了谴古。在這一年來的時(shí)間中，在GitHub不斷閱讀Sass相關(guān)的源碼庆杜。也在國外涉獵了相關(guān)的知識简软，也讓自己初步掌握了一些Sass一些基礎(chǔ)知識與技能药蜻，當(dāng)然也讓自己喜歡上了Sass，并且在國內(nèi)致力于Sass的推廣替饿。希望各多的前端開發(fā)者喜歡上Sass，也希望Sass能真正為前端人員帶來好處贸典。
最近看到越來越多的同學(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è)對于自己來說是全新的東西原朝？看到這樣的問題驯嘱，讓我想起了2010年討論CSS3的時(shí)候，很多同學(xué)同樣有這樣的凝問喳坠，CSS3真的會(huì)來鞠评？我真的要學(xué)習(xí)CSS3？現(xiàn)在壕鹉，時(shí)間證明了一切剃幌。我還是想說，很多東西并不是需要的時(shí)候才去學(xué)晾浴，機(jī)會(huì)是給有準(zhǔn)備的同學(xué)负乡。
似乎有些離題了，我們還是回到今天的話題中來怠肋，為什么要在項(xiàng)目中使用Sass敬鬓？在此，我僅想說說我個(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)目等佳魔。還能讓你的代碼更簡潔。
說到這里晦炊，還有一種聲音在說鞠鲜，小項(xiàng)目有必要使用Sass宁脊？試問，項(xiàng)目有大小之分嗎镊尺？既然Sass能幫助我們更好的開發(fā)朦佩、管理、維護(hù)項(xiàng)目庐氮，那么為什么只允許在大項(xiàng)目中使用Sass语稠，而不能在小項(xiàng)目中使用呢？難道小項(xiàng)目就需要維護(hù)嗎弄砍？不需要管理嗎仙畦？帶著這樣的問題，往下閱讀音婶，或許你會(huì)有些改觀慨畸。
怎么在項(xiàng)目中使用Sass
說了這么多，同學(xué)們更為關(guān)心的是怎么在項(xiàng)目中使用Sass衣式。并不太在意Sass有多好寸士。因?yàn)檫@樣的爭論也實(shí)在是沒有太多的意義。那么我們就不說其他的碴卧，就說怎么在項(xiàng)目中使用Sass吧弱卡。
經(jīng)過在項(xiàng)目中使用Sass，我自身有一些看法住册，或者說我的操作方式吧婶博。也當(dāng)是經(jīng)驗(yàn)吧，希望對初學(xué)者有所幫助荧飞。
創(chuàng)建運(yùn)行Sass的環(huán)境
要想在項(xiàng)目中正常使用Sass凡人，你得先保證你的電腦上能運(yùn)行Sass的環(huán)境。這也是Sass受限叹阔，也是不被大家愛戴的原因之一挠轴。很多人討論使用Sass，需要先安裝Ruby環(huán)境耳幢。對于不喜歡命令編譯的同學(xué)忠荞，還需要安裝GUI編譯器。
其實(shí)安裝Sass環(huán)境也并不是件難事帅掘，就好比配Wamp環(huán)境，整完一次就OK了堂油。但就是這么第一次的安裝修档，給初學(xué)者帶來很多的障礙，也成了同學(xué)們學(xué)習(xí)Sass和使用Sass的攔路虎府框。如果你只是想學(xué)習(xí)或者了解Sass的話吱窝，可以不用在本機(jī)上安裝Sass，你可以借助在線編輯器，比如：SassMeister院峡、CodePen兴使。而且他們都支持即寫即所得。如果你對Sass已有一定的基礎(chǔ)照激，想在項(xiàng)目中使用发魄，已是蠢蠢欲動(dòng)了，那你還是離不開在電腦中安裝Sass環(huán)境俩垃。至于如何在電腦上安裝Sass励幼，在這篇文章中就不做過多的闡述，感興趣的同學(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ì)是件難事苹粟。不過在我們天朝，有些東西被墻了跃闹，時(shí)常讓你安裝Sass不成功嵌削。在這里給大家介紹一個(gè)簡單的方法：
假設(shè)你已成功安裝好了Ruby。先將Sass下載到本地望艺。并打開你的命令終端：
gem install
此時(shí)先不要回車苛秕，將你下載下來的Sass安裝包，用鼠標(biāo)拖到"install"后面荣茫，此時(shí)你在命令終端想帅，可以看到：
gem install /Users/airen/Downloads/sass-3.3.14.gem
這個(gè)時(shí)候再回車，這樣就OK了啡莉。為了確認(rèn)是否安裝成功港准，只面要輸入:
sass -v
如果能看到Sass版本號，就表示你已成功安裝了咧欣。接下來你就可以做你想做的事情了浅缸。
注：不同的系統(tǒng)，不同的用戶和版本魄咕，對應(yīng)相關(guān)路徑和信息都會(huì)不一樣“/Users/airen/Downloads/sass-3.3.14.gem”衩椒。
創(chuàng)建公用的Sass項(xiàng)目模板
在做項(xiàng)目時(shí)，不管什么項(xiàng)目哮兰，他們之間總是有一些可以共用的部分毛萌。比如說重置樣式、公用樣式喝滞、模塊組件阁将、UI庫等。那么在Sass項(xiàng)目中也是如此右遭。為了避免在每個(gè)項(xiàng)目中做一些相同的事情做盅，那么你可以在你的電腦上創(chuàng)建一個(gè)公用的Sass項(xiàng)目模板缤削。比如我創(chuàng)建的：
在這樣的一個(gè)模板中，每個(gè)Sass目錄下的文件夾都對應(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：放置一些跟頁面布局相關(guān)的，比如：_layout.scss活鹰、_header.scss哈恰、_footer.scss、_sidbar.scss等
- pages:放置跟具體項(xiàng)目頁面相關(guān)的樣式文件志群。
- themes：對于一些有前后臺(tái)頁面着绷，或者需換膚的項(xiàng)目，就可以將相關(guān)文件放置在這里锌云。
- vendors：引用的外部插件或者框架的SCSS文件荠医，比如_bootstrap.scss、_foundation.scss桑涎。
- style.scss: 這是主樣式文件彬向，最終編譯，就編譯這個(gè)問題攻冷。當(dāng)然根據(jù)項(xiàng)目大小娃胆，可做一些其他處理。比如說針對不同的頁面,創(chuàng)建不同的page_xxx.scss文件等曼。
當(dāng)然每個(gè)人或許會(huì)有不同的方式方法里烦。創(chuàng)建好了這樣的一個(gè)模板之后，以后只要有新項(xiàng)目禁谦，就可以復(fù)制胁黑、粘貼，然后修改項(xiàng)目名稱州泊，這樣就即可丧蘸。
不過，對于一些公共使用的部分拥诡，還是盡量在公用模板中修改触趴。比如說你添加的混合宏mixin、占位符%placeholder渴肉、函數(shù)功能function冗懦。還有就是一些公用的組件。
或許這樣復(fù)制并不方便仇祭，那是否可以考慮像Compass這樣的框架披蕉，自己寫一個(gè)可安裝的功能呢？或者將公用的部分乌奇，引用到你所有需要的項(xiàng)目中没讲？不過這兩種方法，我都沒有嘗試過礁苗。其一爬凑，自己不會(huì)寫那種帶有g(shù)em
安裝功能的東東，其二试伙，沒有單獨(dú)試過在不同的項(xiàng)目中使用相對路徑調(diào)用資源嘁信。如果您嘗試過，記得與我們一起分享疏叨。
組織Sass項(xiàng)目
其實(shí)就是將公用的這個(gè)當(dāng)作是一個(gè)Sass項(xiàng)目潘靖，只不過這個(gè)Sass項(xiàng)目是用來做備用的，可以無限制的復(fù)用蚤蔓。那么在創(chuàng)建這樣的一個(gè)項(xiàng)目時(shí)卦溢，就需要合理的組織，便天后期的使用秀又。
早前翻譯過John W. Long的一篇文章：如何組織一個(gè)Sass項(xiàng)目单寂。上面的文件組織結(jié)構(gòu)的思路就是來源于此。當(dāng)然涮坐，大家還可以參考一些大型Sass框架做為參考：
Compass
除此之外凄贩，還有：
Sass項(xiàng)目的編譯與調(diào)試
具備上述之后，你在具體編寫Sass的時(shí)候袱讹，還需要掌握Sass的編譯和調(diào)試疲扎。眾所周知，在項(xiàng)目中具體引用的是.css文件而不是.scss或者.sass文件捷雕。所以你要將寫好的Sass編譯成需要的CSS椒丧。對于如何編譯？其實(shí)方法很多種救巷，你要是喜歡使用命令壶熏，你可以直接在命令終端編譯，如果你不喜歡命令編譯浦译，你還可以使用GUI這樣的界面工具輔助編譯棒假。具體的可以閱讀：
除此之外溯职，你要是對Node,Grunt和Gulp熟悉，你還可以使用他們幫你編譯Sass帽哑。比如《Nodejs+Grunt配置SASS項(xiàng)目自動(dòng)編譯》一文所介紹谜酒。
至于如何調(diào)試，前端開發(fā)人員都知道可以使用Firebug這樣的工具來調(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)
說了這么多，我們還是以一個(gè)實(shí)例來做示例吧愕掏，這樣形象一些度秘。假設(shè)收到這樣一個(gè)項(xiàng)目：
在“后臺(tái)”和“前臺(tái)”各對應(yīng)了一些設(shè)計(jì)圖。這些我們并不需要太多關(guān)心亭珍，他們長成什么樣子敷钾。先將創(chuàng)建好的公用Sass項(xiàng)目復(fù)制一份，并將其粘貼到你本地項(xiàng)目環(huán)境中肄梨，修改成你需要的項(xiàng)目名阻荒，比如我這里將其稱為“tuhaokuai”。
拋棄其他因素不看众羡，僅看"sass"目錄侨赡，Sass公用項(xiàng)目和新項(xiàng)目“tuhaokuai”長得是一模一樣。當(dāng)然粱侣，在里面會(huì)不一樣的羊壹。主要在pages
目錄中，針對所需的頁面創(chuàng)建了不同的頁面文件：
如此一來齐婴，針對不同的頁面油猫，添加其對應(yīng)的樣式代碼，比如：
_index.scss
_mysite.scss
其他文件就不一一展示了柠偶，看上去是不是非常清楚情妖。其實(shí)簡單點(diǎn)說，這些東西就是一些零件诱担，我們要讓項(xiàng)目樣式生效毡证，就需要把需要的零件裝上去，然后固定他蔫仙。這樣就好了料睛。在這個(gè)項(xiàng)目中，由于他并不太復(fù)雜，只使用了一個(gè)主樣式：style.scss
恤煞。并且將需要的東西通過@import
引入進(jìn)來：
此時(shí)你只需要將style.scss編譯成style.css屎勘，引用到你的項(xiàng)目就行了。
其實(shí)你也可以按照你自己的需求去組裝居扒，假設(shè)挑秉，首頁我只需要首頁用到的樣式，那么你完全可以創(chuàng)建一個(gè)index.scss的SCSS文件苔货，然后將需要的引入進(jìn)來：
接下來，在index.html引用編譯出來的樣式文件index.css
即可（文件名你可以換成自己想要的）立哑。
著作權(quán)歸作者所有夜惭。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
作者：大漠 日期：2014-08-08
原文：http://www.w3cplus.com/preprocessor/how-to-create-project-with-sass.html
