iT邦幫忙

DAY 35
4

30天掌握Sass語法系列 第 31

Sass開發流程設計 - (5) Sass設計資源整理

  • 分享至 

  • twitterImage
  •  

除了閉門造車設計Sass網站設計流程外,
我自己也時常會去搜尋其他網頁設計師的Sass資源,
再去從對方的設計風格和理念找出優缺,
衡量是否該改善我自己撰寫Sass的習慣,
這一天則是來介紹當初我在撰寫Sass時,
所常去的教學網站與資源來進行介紹:

The Sass Way

連結:http://thesassway.com/
這裡的文章分享,
主要都是介紹Sass的設計理念,
例如該如何模組化你的Sass專案,
或要做RWD網站時,Sass可以如何支援你來去做撰寫,
可能有些人看到英文就有些卻步,
但其實程式碼就可以算是共通語言了,
就算看不懂,你看別人撰寫的程式碼再看tag的關鍵字,
也可從前後脈絡來了解他的蛛絲馬跡,
久而久之就可以培養出閱讀技術文件的習慣了。
Sass語法超讚樣式表
連結:<a href=""></a>
這一篇是國內我認為是最詳盡的Sass介紹,
如果你看不懂Sass所提供的技術文件,
那也可以瀏覽熱心的台灣網頁設計師翻譯過後的版本,
直到現在我也時常會到這裡來去看相關資料,
真的是一篇很適合Sass新手來瀏覽的Sass文件。

Sass Tutorials
連結:http://leveluptuts.com/tutorials/Sass-Tutorials
國外教學影片,
以有淺入深的方式,
讓你逐步了解Sass的基礎功能,
看程式碼與瀏覽器的變化就可很輕易了解其功能,
如果看影片有不了解的地方,
也可以抓到關鍵字後再回上面的超讚樣式表延伸閱讀。

code school
連結:https://www.codeschool.com/paths/html-css
code school除了提供Sass初進階的教學外,
也同時針對基礎的部分有相關的教學,
如果你沒時間看影片的話,也可以下載各單元的投影片,
看完後相信也能讓你更加了解Sass的運用。

Github
連結:https://github.com/
要去瀏覽別人撰寫的Sass,
到Github搜尋別人撰寫的Sass文件也是相當棒的吸收方式,
舉例來說我想找一些別人撰寫好的常用Sass Mixin,
到了Github後就到關鍵字打「Sass Github」送出後,
就會列表出來相關資訊,
選擇一個主題進去後,
你甚至可以點選資料夾直接看code,
瀏覽完你覺得還不錯的話,
也可以按右下角的『Download ZIP』進行下載動作。

直到現在我仍然每週都會以『挖寶』的心態到上面去找資料XD,
這裡也附上Github瀏覽資訊的相關流程影片:
Yes

歷屆投影片
當然瀏覽別人簡報的投影片精華也是不錯的學習方式:

作者:布丁hlb
標題:Sass + Compass 101 Workshop
連結:https://speakerdeck.com/hlb/sass-plus-compass-101-workshop

作者:閃光洽
標題:Sass Compass介紹
連結:http://sass.hinablue.me/

作者:洧杰
標題:SASS workshop
連結:http://www.slideshare.net/sfismy/sass-25113043

--

最後你也可以找個懂Sass同行一塊交流,
來打通你觀念不清楚的地方:
以網頁設計師的聚會來說,
台北有RGBA定期舉辦交流聚會:https://www.facebook.com/rgba.tw

高雄也有定期的網頁設計師聚會:https://www.facebook.com/groups/358503154261390/
在早之前也有舉辦過Sass workshop:https://registrano.com/events/b13c1e

除了自主學習外,
也相當推薦走出來與他人交流,
這樣學習效率也會隨之提升。

一些學習Sass的管道也分享給大家^_^


上一篇
Sass開發流程設計 - (4) 排版流程(下)
下一篇
Sass開發流程設計 - (6) 如何逐步整合自己的Sass資料夾
系列文
30天掌握Sass語法41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言