iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 1 留言 3234 瀏覽

鐵人賽 Modern Web DAY 21

CSS 實戰心法系列第 21 篇

技術 Bootstrap 透過 Sass 新增自定義元件

許多人在使用 Bootstrap 時，如果有需要新增、調整，都是寫在 CSS 的後方或是另開一個新檔透過 "覆蓋" 的特性來新增、調整。先前...

卡斯伯 ‧ 2016-12-21

1 Like 2 留言 3351 瀏覽

技術【課程推薦】Sass開發實戰 - 前端版型管理

各位朋友們好：我是去年有參與第七屆it鐵人邦，分享的內容是SASS教學，近年因應開發技術的更新，網頁/前端設計師在寫CSS時也會開始導入Sass、Less...

廖洧杰 ‧ 2015-04-01

5 Like 0 留言 18459 瀏覽

鐵人賽開發技術 DAY 45

Sass3.3 & CSS設計模式系列第 46 篇

技術 90天掌握Sass語法完賽心得 & 章節目錄

【課程宣傳】今年2015年在北中南皆有開設課程，有興趣的朋友歡迎前往了解，如果周遭的朋友有意深入這塊，也歡迎代為轉貼與宣傳^_^ 今年與去年變動差異較...

廖洧杰 ‧ 2014-10-31

1 Like 1 留言 8815 瀏覽

鐵人賽開發技術 DAY 44

Sass3.3 & CSS設計模式系列第 45 篇

技術 Sass教學(44) - Sass教學手冊導讀

Sass教學手冊目錄連結 **目前的你是否適合使用Sass** 如果你來到這裡，代表著你對CSS有著一定的了解，為了讓你能夠儘快進入學習狀況，這個章節主要是...

廖洧杰 ‧ 2014-10-30

1 Like 0 留言 6376 瀏覽

鐵人賽開發技術 DAY 43

Sass3.3 & CSS設計模式系列第 44 篇

技術 Sass教學(43) - Sass Style Guide(樣式指南) - Sass、Github、Codepen

以下文章同步於Github。相關連結 1.Sass官網 Styleguide 2.github Styleguide 3.CodePen's CSS 進入主題...

廖洧杰 ‧ 2014-10-29

2 Like 0 留言 5816 瀏覽

鐵人賽開發技術 DAY 42

Sass3.3 & CSS設計模式系列第 43 篇

技術 Sass教學 (42) - SMACSS - 結構規劃與其它補充

以下文章同步於Github。 Minimizing the Depth(最小化深度) 有的時候我們設計模組時常會因為需求變動而新增元素，一個區塊內可能就會新增...

廖洧杰 ‧ 2014-10-28

0 Like 0 留言 5016 瀏覽

鐵人賽開發技術 DAY 41

Sass3.3 & CSS設計模式系列第 42 篇

技術 Sass教學 (41) - Sass開發經驗分享

以下文章同步於Github。這篇分享會比較雜一些，主要是分享這一兩年使用Sass時遇到的問題，畢竟寫程式並不是自己一個人的事情，有的時候會因為團隊組成、...

廖洧杰 ‧ 2014-10-27

1 Like 0 留言 10030 瀏覽

鐵人賽開發技術 DAY 40

Sass3.3 & CSS設計模式系列第 41 篇

技術 Sass教學 (40) - 使用Sass Maps提升程式可讀、變數群組性

以下文章同步於Github。範例程式碼 1.Using Sass Maps 2.w3cplus - Sass Maps 3.Handling z-index...

廖洧杰 ‧ 2014-10-26

1 Like 0 留言 8631 瀏覽

鐵人賽開發技術 DAY 39

Sass3.3 & CSS設計模式系列第 40 篇

技術 Sass教學 (39) - 輕鬆import資料夾內所有sass檔

以下文章同步於Github。 Sass Globbing Plugin連結在這個plugin還沒有出現之前， Sass是不支援@import整個資料夾所有的S...

廖洧杰 ‧ 2014-10-25

2 Like 0 留言 4168 瀏覽

鐵人賽開發技術 DAY 38

Sass3.3 & CSS設計模式系列第 39 篇

技術 Sass教學 (38) - 這麼多Sass/CSS設計模式，究竟該如何漸進學習？

以下文章同步於Github。以目前台灣比較熱門的CSS設計模式有： 1.SMACSS 2.OOCSS 3/BEM (較少人用，但觀念時常被提起) 4/MVCS...

廖洧杰 ‧ 2014-10-24

1 Like 0 留言 2139 瀏覽

鐵人賽開發技術 DAY 37

Sass3.3 & CSS設計模式系列第 38 篇

技術 Sass教學 (37) - MVCSS - Manifest、Vendor

以下文章同步於Github。程式碼連結 MVCSS MVCSS中文翻譯這個章節主要是聊MVCSS的Sass結構與命名方式，首先我們就來看到Sass結構：...

廖洧杰 ‧ 2014-10-23

2 Like 0 留言 2335 瀏覽

鐵人賽開發技術 DAY 36

Sass3.3 & CSS設計模式系列第 37 篇

技術 Sass教學 (36) - MVCSS - Components、Structures

以下文章同步於Github。程式碼連結 MVCSS MVCSS中文翻譯 Components(組件) 具有辨識性的UI皆放在Components的Sass目錄...

廖洧杰 ‧ 2014-10-22

1 Like 0 留言 3604 瀏覽

鐵人賽開發技術 DAY 35

Sass3.3 & CSS設計模式系列第 36 篇

技術 Sass教學 (35) - MVCSS - Foundation

以下文章同步於Github。程式碼連結 MVCSS MVCSS中文翻譯 Foundation Foundation是指當你要使用MVCSS設計模式來建立你的S...

廖洧杰 ‧ 2014-10-21

2 Like 0 留言 3850 瀏覽

鐵人賽開發技術 DAY 34

Sass3.3 & CSS設計模式系列第 35 篇

技術 Sass教學 (34) - MVCSS - Styleguide

以下文章同步於Github。程式碼連結 MVCSS MVCSS中文翻譯進入主題 MVCSS融合了SMACSS、OOCSS、BEM的設計模式，同時有參考了F...

廖洧杰 ‧ 2014-10-20

4 Like 1 留言 28286 瀏覽

鐵人賽開發技術 DAY 33

Sass3.3 & CSS設計模式系列第 34 篇

達標好文技術 Sass教學 (33) - BEM 設計模式

影片教學請點選下圖連結↓ [ ](https://www.youtube.com/watch?v=1koKr0-k8Wc) 以下文章同步於Github。程式...

廖洧杰 ‧ 2014-10-19

5 Like 1 留言 7908 瀏覽

鐵人賽開發技術 DAY 32

Sass3.3 & CSS設計模式系列第 33 篇

技術 Sass教學 (32) - OOCSS - 提升CSS複用性

影片教學請點選下圖連結↓ 以下文章同步於Github。程式碼連結 OOCSS An Introduction To Object Oriented CS...

廖洧杰 ‧ 2014-10-18

3 Like 0 留言 4176 瀏覽

鐵人賽開發技術 DAY 31

Sass3.3 & CSS設計模式系列第 32 篇

技術 Sass教學 (31) - SMACSS - Theme Rules

影片教學請點選下圖連結↓ 以下文章同步於Github。程式碼連結 SMACSS - Theme Themes(主題) - 將網站的佈局與樣式抽離接著要...

廖洧杰 ‧ 2014-10-17

3 Like 0 留言 3048 瀏覽

鐵人賽開發技術 DAY 30

Sass3.3 & CSS設計模式系列第 31 篇

技術 Sass教學 (30) - SMACSS - State Rules

影片教學請點選下圖連結↓ 以下文章同步於Github。程式碼連結 SMACSS - State codepen 範例程式碼進入主題 State(狀態)...

廖洧杰 ‧ 2014-10-16

3 Like 1 留言 4753 瀏覽

鐵人賽開發技術 DAY 29

Sass3.3 & CSS設計模式系列第 30 篇

技術 Sass教學 (29) - SMACSS - Module Rules

影片教學請點選下圖連結↓ 以下文章同步於Github。程式碼連結 SMACSS - Module 進入主題 Module意思是一個獨立的CSS組件或單一...

廖洧杰 ‧ 2014-10-15

1 Like 1 留言 6571 瀏覽

鐵人賽開發技術 DAY 28

Sass3.3 & CSS設計模式系列第 29 篇

技術 Sass教學 (28) - @each+Sass Maps批次新增各元素樣式

影片教學請點選下圖連結↓ 以下文章同步於Github。範例程式碼 sassmeister-程式碼範例 A Sass Component in 10 Mi...

廖洧杰 ‧ 2014-10-14

1 Like 0 留言 19243 瀏覽

鐵人賽開發技術 DAY 27

Sass3.3 & CSS設計模式系列第 28 篇

技術 Sass教學 (27) - 如何使用Sass來管理你的Bootstrap

影片教學請點選下圖連結↓ 以下文章同步於Github。範例程式碼 Github 範例程式碼學習目標 1.了解Bootstrap Sass結構 2.能夠透...

廖洧杰 ‧ 2014-10-13

2 Like 0 留言 8071 瀏覽

鐵人賽開發技術 DAY 26

Sass3.3 & CSS設計模式系列第 27 篇

技術 Sass教學 (26) - 使用animate.scss增強網頁瀏覽體驗

影片教學請點選下圖連結↓ 以下文章同步於Github。範例程式碼 animate.css animate sass版本 Github 範例程式碼進入主題...

廖洧杰 ‧ 2014-10-12

1 Like 1 留言 28948 瀏覽

鐵人賽開發技術 DAY 25

Sass3.3 & CSS設計模式系列第 26 篇

技術 Sass教學 (25) - 如何透過Sublime text 3 plugin打造Sass開發環境

影片教學請點選下圖連結↓ 以下文章同步於Github。 Sublime text 3 網站連結，首先Sublime text 3是沒有提供Sass、Scs...

廖洧杰 ‧ 2014-10-11

1 Like 0 留言 9856 瀏覽

鐵人賽開發技術 DAY 24

Sass3.3 & CSS設計模式系列第 25 篇

技術 Sass教學 (24) - Sass 3.3 Source Maps

影片教學請點選下圖連結↓ 以下文章同步於Github。 Sass 3.3新增的Source Maps主要功能就是讓瀏覽器能夠支援下圖效果：透過上圖，就...

廖洧杰 ‧ 2014-10-10

2 Like 0 留言 4049 瀏覽

鐵人賽開發技術 DAY 23

Sass3.3 & CSS設計模式系列第 24 篇

技術 Sass教學 (23) - Susy2學習摘要

以下文章同步於Github。在你即將開始進入Susy2的世界前，可先瀏覽17.使用Susy2前，你必須要懂的CSS觀念，如果這些觀念還不是很清楚，建議...

廖洧杰 ‧ 2014-10-09

2 Like 0 留言 3532 瀏覽

鐵人賽開發技術 DAY 22

Sass3.3 & CSS設計模式系列第 23 篇

技術 Sass教學 (22) - 使用Susy2前，你必須要懂的CSS觀念

影片教學請點選下圖連結↓ 以下文章同步於Github。並不是使用Susy2，就表示所有和layout有關的都必須全部導入 Susy2確實是一個強大的Gir...

廖洧杰 ‧ 2014-10-08

2 Like 0 留言 2662 瀏覽

鐵人賽開發技術 DAY 21

Sass3.3 & CSS設計模式系列第 22 篇

技術 Sass教學 (21) - Susy2 語法速記表

以下文章同步於Github，Github會有連結對應到Susy功能。 $susy預設版型設定 1.第一個參數為預設值，頓號後面則是其他選擇 2.除了數值外，其他...

廖洧杰 ‧ 2014-10-07

2 Like 0 留言 3196 瀏覽

鐵人賽開發技術 DAY 20

Sass3.3 & CSS設計模式系列第 21 篇

技術 Sass教學 (20) - Susy2 線上教學資源

zell-weekeat 連結：網址點此這位作者的blog是我目前瀏覽最為豐富的，若要封他為Susy2的傳教士也真的夠格，就連Susy2的官網教學，也引...

廖洧杰 ‧ 2014-10-06

1 Like 0 留言 2106 瀏覽

鐵人賽開發技術 DAY 19

Sass3.3 & CSS設計模式系列第 20 篇

技術 Sass教學 (19) - susy2 - Toolkit - Rows & Edges

影片教學請點選下圖連結↓ 以下文章同步於Github。範例程式碼 susy2 - Rows & Edges Rows & Edges Br...

廖洧杰 ‧ 2014-10-05

1 Like 0 留言 3647 瀏覽

鐵人賽開發技術 DAY 18

Sass3.3 & CSS設計模式系列第 19 篇

技術 Sass教學 (18) - susy2 - Toolkit - gutter、container

影片教學請點選下圖連結↓ 以下文章同步於Github。範例程式碼 susy2 - Gutters Gutters 支援function、mixin的寫法，...

廖洧杰 ‧ 2014-10-04