SASS該怎麼寫？會和純CSS寫法差很多嗎？ - W3HexSchool

所以開始就有人為CSS加入了這些功能， 因此也產生出『CSS預處理器(css preprocessor)』的語言， 除了Sass以外，還有Less與stylus等語言 ... W3Hexschool 學習單元(current) 共筆部落格(current) X 未分類 sass 什麼是SASS？它真的能加速我寫CSS的效率嗎？ SASS該怎麼寫？會和純CSS寫法差很多嗎？ W3HexSchool sass SASS該怎麼寫？會和純CSS寫法差很多嗎？ SASS該怎麼寫？會和純CSS寫法差很多嗎？ 洧杰 已發佈 2019-9-11 寫過CSS的朋友都知道，CSS並不像是其他程式語言擁有類似變數、條件等方式來撰寫，僅只能一行行來進行編輯，所以當今天有很多地方需要去做修正時，就必須花很多時間逐行去修正，在維護與重製上就必須花更多的時間去調整。

所以開始就有人為CSS加入了這些功能，因此也產生出『CSS預處理器(csspreprocessor)』的語言，除了Sass以外，還有Less與stylus等語言， 而他實踐的手法則是編輯Sass檔案，透過編譯後就還是會變成網頁看得懂的CSS檔，所以並非是在HTML裡面載入Sass檔，仍然還在引入CSS檔案..寫過CSS的朋友都知道，CSS並不像是其他程式語言擁有類似變數、條件等方式來撰寫，僅只能一行行來進行編輯，所以當今天有很多地方需要去做修正時，就必須花很多時間逐行去修正，在維護與重製上就必須花更多的時間去調整。

所以開始就有人為CSS加入了這些功能，因此也產生出『CSS預處理器(csspreprocessor)』的語言，除了Sass以外，還有Less與stylus等語言， 而他實踐的手法則是編輯Sass檔案，透過編譯後就還是會變成網頁看得懂的CSS檔，所以並非是在HTML裡面載入Sass檔，仍然還在引入CSS檔案， 當初我在猶豫要不要學SASS的時候，其實這一點有讓我很感冒，因為它比之前寫原生CSS的差異在於，寫SASS時必須轉檔成CSS，而且還必須等他編譯完才可看到結果感到很不方便。

直到後來會讓我想學習的動機在於，看一些國際的網頁設計師在github分享的網頁樣式都時常會釋出SASS檔出來，再者也看到國內的資深網頁設計師也發文介紹它的強大之處，也由於現前css撰寫上遇到不少效率瓶頸，才終於讓我想投入學習，雖然陣痛期難免，但熟悉以後開發效率真的快到個爆炸...就像犀利人妻的經典台詞：『我再也回不去了』...冏 -- 所以這一章節就先來介紹SASS、SCSS的寫法，我們先來看一段CSS碼， .menu{ position:relative; } .menuli{ float:left } .menua{ display:block } .menuspan{ color:#fff } .menui{ background:url(dot-icon.png); }這一段CSS是一個很常見的列表式選單的設計，在.menu的範圍內有其他的htmltag需要設定，這一段程式碼在寫純CSS時會遭遇到一些問題， 1.新增：每次都必須重新打一次.menu後才有辦法繼續寫一個樣式的設定，例如.menua、.menuli2.調整：程式碼寫完後，日後要修改/維護/複製時，.menu要改其它名稱就必須逐行去修改，極為不方便。

3.除錯：寫純css時，如果不小心恍神少了個「;」、「｛」、「｝」時，CSS爛掉或沒起效用通常都需要花額外的時間除錯。

上述三個問題，假使習慣撰寫SASS後，都可大量減輕其負擔：首先介紹SASS的語法 .menu position:relative li float:left a display:block span color:white i background:url(dot-icon.png)可以看得出來這樣的語法極其精簡，也去掉了分號與大括號，讓你可以專注在撰寫CSS上， 撰寫SASS的繼承下一個class流程為就按Enter後，下一行推一個Tab，所以如果我要.menu裡面又有一個.active要設定時，就必須這樣子寫： .menu position:relative .active color:#000日後如果你class有衝突，就直接把最上頭的.menu改成.header，這樣子編譯出來的css也會自動幫你進行修改。

因為it邦支援的高亮支援不太ok，所以就錄製一段影片讓大家可以了解撰寫SASS的流程，請用全螢幕+720p來瀏覽 1.我用sublime編輯器左右開兩個視窗，左邊放sass檔案，寫的過程會按ctrl+s儲存，儲存後右邊的css檔案會自動編譯更新css。

2.36秒我希望我的a連結是在li裡面，所以全選後用tab推進3.1分24秒處的&字號則是繼承前面的class所用，打w300按tab會直接show出width:300是因為我裝了sublime的插件emmet4.1分34秒我全選後向左與向右推進是用了ctrl+[與ctrl+]熱鍵，藉此讓大家了解繼承的關係。

5.1分49秒則是Sass強大之處，以後不要一直複製貼上或改class需要同時改很多個地方，只要改一處其他也會更著變動。

PS：當然使用這個東西時要注意一些細節，冒號後一致要加個空白，再寫顏色，另外在推進的時候要用Tab來推進，不能使用兩次空白，但如果你是用sublimetext3編輯器來撰寫的話，上述的問題也可解決，它會在你撰寫css時自動幫你在冒號後留空白。

有興趣的朋友也可以用http://codepen.io/的線上編輯器來玩看看 關於筆者 暱稱：洧杰 介紹：六角學院校長，熱愛分享與交流的前端工程師，目前專注於兼容桌面/移動網頁前端開發，期間已協助數百位平面設計師，網頁設計師導入標準網頁設計。

筆者Facebook 上一篇什麼是SASS？它真的能加速我寫CSS的效率嗎？