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

2 Like 0 留言 3719 瀏覽

鐵人賽開發技術 DAY 22

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

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

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

廖洧杰 ‧ 2014-10-08

2 Like 0 留言 2781 瀏覽

鐵人賽開發技術 DAY 21

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

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

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

廖洧杰 ‧ 2014-10-07

2 Like 0 留言 3307 瀏覽

鐵人賽開發技術 DAY 20

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

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

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

廖洧杰 ‧ 2014-10-06

1 Like 0 留言 2189 瀏覽

鐵人賽開發技術 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 留言 3842 瀏覽

鐵人賽開發技術 DAY 18

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

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

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

廖洧杰 ‧ 2014-10-04

1 Like 0 留言 3755 瀏覽

鐵人賽開發技術 DAY 17

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

技術 Sass教學 (17) - susy2 - Toolkit - Span Mixin、function

影片教學請點選下圖連結↓ 以下文章同步於Github。範例程式碼 susy2 - span Mixin、function Span [mixin] 格式：...

廖洧杰 ‧ 2014-10-03

1 Like 0 留言 3110 瀏覽

鐵人賽開發技術 DAY 16

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

技術 Sass教學 (16) - susy2 - Shorthand(簡寫)

影片教學請點選下圖連結↓ 以下文章同步於Github。範例程式碼 1.susy2 - shorthand 2.sassmeister-程式碼範例 shor...

廖洧杰 ‧ 2014-10-02

1 Like 0 留言 5568 瀏覽

鐵人賽開發技術 DAY 15

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

技術 Sass教學 (15) - susy2 - 實作Bootstap3 RWD Grid

影片教學請點選下圖連結↓ 以下文章同步於Github。這個章節主要是要來講如何透過Susy2來設計Bootstrap的版型，透過模仿別人設計好的RWD...

廖洧杰 ‧ 2014-10-01

1 Like 0 留言 6713 瀏覽

鐵人賽開發技術 DAY 13

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

技術 Sass教學 (13) - susy2 - 如何打造susy2開發環境

影片教學請點選下圖連結↓ 以下文章同步於Github。進入主題目前已經有軟體可以編譯Sass與Susy2，例如Fire.app、codekit等等，...

廖洧杰 ‧ 2014-09-29

1 Like 0 留言 3585 瀏覽

鐵人賽開發技術 DAY 12

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

技術 Sass教學 (12) - susy2 - 使用with layout讓版型同時存在兩種以上的Grid

影片教學請點選下圖連結↓ 以下文章同步於Github。使用With Layout讓版型同時存在兩種以上的Grid 在講第七、八章的時候，各位可以看出我...

廖洧杰 ‧ 2014-09-28

2 Like 0 留言 13284 瀏覽

鐵人賽開發技術 DAY 11

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

技術 Sass教學 (11) - @content

影片教學請點選下圖連結↓ 以下文章同步於Github。 @content的用途主要是拿來傳遞內容到Mixin裡面去的，像是一般的Mixin大家所認知的就...

廖洧杰 ‧ 2014-09-27

1 Like 0 留言 3696 瀏覽

鐵人賽開發技術 DAY 10

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

技術 Sass教學 (10) - susy2 - 設計不對稱(Asymmetrical) RWD Grid

影片教學請點選下圖連結↓ 以下文章同步於Github。這章是要來講使用isolate來設定不對稱的 RWD Grid，像有些網頁設計師會覺得不希望版型...

廖洧杰 ‧ 2014-09-26

1 Like 1 留言 8826 瀏覽

鐵人賽開發技術 DAY 9

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

技術 Sass教學 (9) - susy2 - 透過susy breakpoint、layout設計RWD Grid

影片教學請點選下圖連結↓ 以下文章同步於Github。這章主要是來分享用susy2來設計responsive grid，一開始會先介紹susy2的lat...

廖洧杰 ‧ 2014-09-25

1 Like 0 留言 5812 瀏覽

鐵人賽開發技術 DAY 8

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

技術 Sass教學 (8) - susy2 - responsive grid with Breakpoint

影片教學請點選下圖連結↓ 以下文章同步於Github。由於我們即將要來介紹如何透過susy2來設計responsive grid，在那之前我想先花一章...

廖洧杰 ‧ 2014-09-24

3 Like 0 留言 7660 瀏覽

鐵人賽開發技術 DAY 7

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

技術 Sass教學 (7) - SMACSS - Base、Laout

影片教學請點選下圖連結↓ 以下文章同步於Github。程式碼連結 SMACSS - Base SMACSS - Layout SMACSS是Jonath...

廖洧杰 ‧ 2014-09-23

1 Like 0 留言 5538 瀏覽

鐵人賽開發技術 DAY 6

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

技術 Sass教學 (6) - Sass 3.3 - 參考父選擇符：&

影片教學請點選下圖連結↓ 以下文章同步於Github。先來介紹以前Sass3.2的語法， //scss .box{ color:black;...

廖洧杰 ‧ 2014-09-22

1 Like 0 留言 4910 瀏覽

鐵人賽開發技術 DAY 4

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

技術 Sass教學 (4) - susy2 - 960Grid固定版型(Fixed layout)設計

影片教學請點選下圖連結↓ 以下文章同步於Github。我遇過許多朋友都提到，他們很想要學好susy，但是真的有案子要用的時候，卻又不知道該如何下手...

廖洧杰 ‧ 2014-09-20

1 Like 0 留言 5626 瀏覽

鐵人賽開發技術 DAY 3

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

技術 Sass教學 (3) - susy2 Grid settings(下)

影片教學請點選下圖連結↓ 以下文章同步於Github。這一個章節主要是要講susy2的Debug模式，除了維持susy1就有的column顯示外，還...

廖洧杰 ‧ 2014-09-19

1 Like 0 留言 4605 瀏覽

鐵人賽開發技術 DAY 2

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

技術 Sass教學 (2) susy2 - Grid settings(中)

影片教學請點選下圖連結↓ 以下文章同步於Github。上個章節講了susy2的簡易設定方式，接著我們來看它預設的全域設定， susy2 global-...

廖洧杰 ‧ 2014-09-18

3 Like 1 留言 3503 瀏覽

鐵人賽開發技術 DAY 1

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

技術 Sass教學 (1) - susy2 - Grid settings(上)

以下文章同步於Github。 susy1到susy2又是一個可怕的里程碑，原本覺得susy1已經很強大了，但在susy2面前，susy1就像是玩具一樣，...

廖洧杰 ‧ 2014-09-17

5 Like 2 留言 9015 瀏覽

鐵人賽開發技術 DAY 1

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

技術 Sass教學(1) - susy2 - Grid settings(上)

影片教學請點選下圖連結↓ 以下文章同步於Github。 susy1到susy2又是一個可怕的里程碑，原本覺得susy1已經很強大了，但在susy2面前...

廖洧杰 ‧ 2014-09-17

1 Like 1 留言 4314 瀏覽

技術【課程推薦】前端開發課程 - Sass實戰教學

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

廖洧杰 ‧ 2014-05-16

14 Like 2 留言 5104 瀏覽

鐵人賽開發技術 DAY 45

30天掌握Sass語法系列第 41 篇

達標好文技術 45天掌握Sass語法-完賽心得

終於結束這45天的奇幻之旅，真的寫得很盡興，很高興有這個活動讓我有機會整理我腦袋上的東西。每天花上8~12小時不間斷地錄製教學影片和撰寫文章，最初的目的是...

廖洧杰 ‧ 2013-10-30

8 Like 1 留言 7717 瀏覽

鐵人賽開發技術 DAY 44

30天掌握Sass語法系列第 40 篇

技術 Sass開發流程設計 - (14)Susy RWD Grid排版流程(下)

延續上章，為了讓大家了解Susy Grid的設計流程，我的程式碼都會以乾淨的色塊來呈現內容，建議下載github原始檔，以方便後續學習： https:/...

廖洧杰 ‧ 2013-10-29

6 Like 1 留言 9114 瀏覽

鐵人賽開發技術 DAY 43

30天掌握Sass語法系列第 39 篇

技術 Sass開發流程設計 - (13)Susy RWD Grid排版流程(上)

前面花了幾章篇幅討論Susy該怎麼用，這次我們就直接進入實作吧，首先我先找了個free的template：http://www.html5mania.com...

廖洧杰 ‧ 2013-10-28

10 Like 2 留言 14375 瀏覽

鐵人賽開發技術 DAY 42

CSS沒有極限系列第 38 篇

技術 CSS - 利用jQuery套用Class(超簡單!)

CSS是專門處理網頁的樣式，在互動的部分都會使用javascript，雖然本網站之前的許多互動範例是純CSS，但會有相容性上的問題，而要簡易方式去寫互動的元件，...

卡斯伯 ‧ 2013-10-27

8 Like 0 留言 8688 瀏覽

鐵人賽開發技術 DAY 42

30天掌握Sass語法系列第 38 篇

技術 Sass開發流程設計-(12) Compass Vertical Rhythm & Susy other setting

Compass Vertical Rhythm - 網頁上的字型大小與行距的統一調整在以往我們在設計網頁時，通常在設定一些文字排版上的元素設定line-he...

廖洧杰 ‧ 2013-10-27

8 Like 1 留言 4897 瀏覽

鐵人賽開發技術 DAY 41

CSS沒有極限系列第 37 篇

技術 CSS - Flex的對齊

今天參加了MOPCON，所以來介紹簡單一點的。承前篇，Flex是為了改善過去的CSS2排版模式所衍生出的新語法，本章則要介紹他的對齊方式。 CSS範例：http...

卡斯伯 ‧ 2013-10-26

5 Like 2 留言 12399 瀏覽