iT邦幫忙

DAY 1
21

30天掌握Sass語法系列 第 1

30天掌握Sass語法 - (1)什麼是SASS?它真的能加速我寫CSS的效率嗎?

SASS是一個可以提升寫網頁CSS效率的程式語言,
但礙於學習曲線門檻過高,導致國內網頁設計師的使用率仍未普及化,
希望藉由個人從CSS轉SASS的經驗分享,
讓大家都可對SASS有更進一步的了解。
各位好,
我是高雄的前端工程師,洧杰,

這裡要向大家介紹SASS這個程式語言,
通常來說,一般的教學文都是從基本介紹開始學起,
但這次分享我會以「實際案例」、「情境代入式」的方式進行介紹,
讓大家了解SASS有哪些細節是無法利用CSS來取代的,

所以這裡也提供一個檢測表給各位,
如果下面數點你有一半以上的問題都曾遭遇到,
那就很適合開始學SASS來逐步解決掉你寫CSS遇到的問題。

1.如果CSS寫越來越多時,時常必須用滑鼠滾輪上下找CODE,因此而感到煩躁
2.有時候有些IE hack的語法用過就忘了,還必須找自己做過的舊網站或google重新找解法
3.一個網站有很多文字顏色要設定,但通常都必須一行行找出來逐一將色碼取代,感到極不方便
4.偶爾想要用CSS3特效時,因為有太多瀏覽器前綴,所以導致要改一個設定時,就同時必須改其它前綴覺得很麻煩
5.有時候命名的div class叫做.header時,底下如果有很多子元素時,通常都必須一直重複打.header而感到重工感。例:.header h1、.header li a、.header .topbar
6.有時候有四五個元素要並排時,時常必須拿出計算機出來算計元素寬度、間距而感到不耐煩
7.寫css共通樣式合併class時,還必須用滾輪滾動到當初合併的位置而感到不方便。.header,.content{width:1003px}
8.時常因元素與元素之間的px像素對齊而傷透腦筋
9.找不到適合自己重複再利用的CSS模組化方法
10.認為自己開發網頁CSS效率遇到瓶頸,欲尋更好的撰寫效率與工具
11.在做responsive網頁版型時,找不到合適的framework來撰寫
12.找不到可以整合在自己開發習慣的css sprite
13.由於需載入背景圖片,所以時常需要切換視窗來瀏覽圖片的實際寬度後,才有辦法在css撰寫高寬,對此頻繁切換瀏覽的流程感到不耐煩
14.有時候寫css有個結尾或分號沒寫到,導致除錯除了老半天才發現錯誤,降低寫code效率
15.通常要使用其他元素的樣式時,僅會直接貼該元素的code複製到要新增的code,而不了解該如何使用繼承方式來進行樣式繼承。
16.常聽業界聽到SASS、COMPASS、Fire.app很夯,但卻沒有基礎教學流程從頭學起

--

以上林林總總的問題,
使用SASS都可以迎刃而解,
而SASS對我來說最大的好處在於,
它可以讓自己擁有一個『CSS內隱知識庫』,
讓你不用再記一堆code的瀏覽器解法與觀念問題,
僅只要記錄一次後,日後只要引入自己曾經寫過的code就可以解決問題,
讓我可以專注在網頁效果的處理上,不用再去多花心思在重工或過於繁瑣的流程上面,

希望藉由這30天的密集產出,讓大家對sass有更進一步的認識,
下一章節則會開始教該如何使用sass,敬請期待嘍 :D


下一篇
30天掌握Sass語法 - (2)SASS該怎麼寫?會和純CSS寫法差很多嗎?
系列文
30天掌握Sass語法41
0
鐵殼心
iT邦高手 1 級 ‧ 2013-09-16 14:39:12

沙發
總裁承讓

比我快驚

很久沒搶沙發了...

總裁 iT邦好手 1 級‧ 2013-09-16 15:19:38 檢舉

哈哈知道是我讓的就好...睡覺

0
老鷹(eagle)
iT邦高手 1 級 ‧ 2013-09-16 14:39:24

讚沙發

sfisonly提到:
讓我可以專注在網頁效果的處理上,不用再去多花心思在重工或過於繁瑣的流程上面

這個超讚!
CSS真是個麻煩 不過最近使用Bootstrap,很多都直接套用!

0
timfeng
iT邦新手 4 級 ‧ 2013-09-16 15:07:04

期待!

我要留言

立即登入留言