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

3 Like 0 留言 4183 瀏覽

鐵人賽開發技術 DAY 31

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

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

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

廖洧杰 ‧ 2014-10-17

2 Like 0 留言 4172 瀏覽

鐵人賽開發技術 DAY 38

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

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

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

廖洧杰 ‧ 2014-10-24

0 Like 0 留言 4146 瀏覽

鐵人賽 Modern Web DAY 11

React + GraphQL 全端練習筆記系列第 11 篇

技術 SASS/SCSS 簡介

本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。雖...

Jasper ‧ 2020-09-24 ‧團隊Outcome First

4 Like 0 留言 4078 瀏覽

鐵人賽開發技術 DAY 27

CSS沒有極限系列第 23 篇

技術 CSS沒有極限 - pure CSS 專輯列表效果

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-12 (建議使用Chrome瀏覽器) 鐵人賽快要結束了，今明兩天會介紹純...

卡斯伯 ‧ 2013-10-12

2 Like 0 留言 4051 瀏覽

鐵人賽開發技術 DAY 23

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

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

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

廖洧杰 ‧ 2014-10-09

2 Like 0 留言 3854 瀏覽

鐵人賽開發技術 DAY 34

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

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

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

廖洧杰 ‧ 2014-10-20

5 Like 1 留言 3780 瀏覽

鐵人賽開發技術 DAY 1

CSS沒有極限系列第 1 篇

技術 CSS沒有極限Intro

CSS不斷的進化及改變，在過去所遇到的問題、解決方式現在都有著不同的解決方法。在接觸網頁設計一年多，不斷的學習CSS技術，到頭來發現這項技術是沒有極限的，每天都...

卡斯伯 ‧ 2013-09-16

5 Like 0 留言 3759 瀏覽

技術 Sass/Scss 基礎知識學習筆記

Sass/Scss是一個非常好用的預處理器，所謂預處理器，就是可以在我們轉變成CSS之前，更有結構性寫、簡潔、清晰且好維護的 CSS 程式碼，在大型專案中可說是...

no027843 ‧ 2020-06-02

1 Like 0 留言 3703 瀏覽

鐵人賽開發技術 DAY 17

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

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

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

廖洧杰 ‧ 2014-10-03

3 Like 0 留言 3673 瀏覽

技術 Scss - 小知識與進階功能 ( 上 )

之前介紹過 SCSS 的基礎功能了，沒看過可以看這裡唷，這次來介紹一些小知識與進階的功能吧! SCSS 小知識註解 SCSS 的註解有分為兩種，一種會被輸出一...

Ares ‧ 2019-08-05

1 Like 0 留言 3651 瀏覽

鐵人賽開發技術 DAY 18

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

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

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

廖洧杰 ‧ 2014-10-04

1 Like 0 留言 3618 瀏覽

鐵人賽開發技術 DAY 10

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

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

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

廖洧杰 ‧ 2014-09-26

1 Like 0 留言 3607 瀏覽

鐵人賽開發技術 DAY 35

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

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

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

廖洧杰 ‧ 2014-10-21

2 Like 0 留言 3532 瀏覽

鐵人賽開發技術 DAY 22

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

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

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

廖洧杰 ‧ 2014-10-08

1 Like 0 留言 3525 瀏覽

鐵人賽開發技術 DAY 12

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

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

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

廖洧杰 ‧ 2014-09-28

3 Like 1 留言 3376 瀏覽

鐵人賽開發技術 DAY 1

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

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

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

廖洧杰 ‧ 2014-09-17

1 Like 2 留言 3359 瀏覽

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

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

廖洧杰 ‧ 2015-04-01

1 Like 1 留言 3241 瀏覽

鐵人賽 Modern Web DAY 21

CSS 實戰心法系列第 21 篇

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

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

卡斯伯 ‧ 2016-12-21

8 Like 4 留言 3226 瀏覽

鐵人賽開發技術 DAY 30

CSS沒有極限系列第 26 篇

技術 CSS沒有極限 - 鐵人賽不是開始，也不是結束

在鐵人賽前一個月，我在進行一個計劃，就是挑戰100天發文，內容以前端為主，雖然每天都有新的文章，但我都不會特別去核對文章的內容。而鐵人賽開始後，將主題調整為CS...

卡斯伯 ‧ 2013-10-15

9 Like 4 留言 3206 瀏覽

鐵人賽開發技術 DAY 2

CSS沒有極限系列第 2 篇

技術 CSS 的改變

CSS不斷的進化及改變，在過去所遇到的問題、解決方式現在都有著不同的解決方法。在接觸網頁設計一年多，不斷的學習CSS技術，到頭來發現這項技術是沒有極限的，每天都...

卡斯伯 ‧ 2013-09-17

2 Like 0 留言 3198 瀏覽

鐵人賽開發技術 DAY 20

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

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

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

廖洧杰 ‧ 2014-10-06

3 Like 0 留言 3052 瀏覽

鐵人賽開發技術 DAY 30

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

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

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

廖洧杰 ‧ 2014-10-16

0 Like 0 留言 2967 瀏覽

鐵人賽自我挑戰組 DAY 12

蛻變事實－UI設計師勇闖前端城系列第 12 篇

技術 [蛻變事實／D12] 設計師勇闖前端城－( SASS & SCSS ＆ CSS 三角關係）

先來看看這張圖各位看出什麼了嗎？ CSS 大部份人都不陌生，如果是有在摸索網頁或有在寫BLOG的朋友們，多多少少已經碰過啦 SASS & SCSS...

凱特麻麻桑 ‧ 2018-10-27

1 Like 0 留言 2962 瀏覽

鐵人賽開發技術 DAY 16

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

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

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

廖洧杰 ‧ 2014-10-02

1 Like 0 留言 2930 瀏覽

鐵人賽 Modern Web DAY 26

CSS 實戰心法系列第 26 篇

技術實戰心法 - 應避免的 Sass @extend

Sass 的 @extend 可以將相同的樣式整理再一起，在其他語言來說是非常帥氣的技法，但在 CSS 中請警慎使用。就如同本篇鐵人賽一開始所介紹到的 OOC...

卡斯伯 ‧ 2016-12-26

0 Like 0 留言 2914 瀏覽

鐵人賽 Modern Web DAY 12

For 前端小幼苗的圖解筆記系列第 12 篇

技術 [CSS] Sass 入門教學-新手上路重點摘要(下)

好的~上一篇已經學會了 Sass 基本的語法應用，這篇來介紹 Sass 的進階語法，讓你會一度有 CSS 是程式語言的錯覺。先記住這兩個語法定義變數va...

Eudora ‧ 2020-09-27

7 Like 1 留言 2760 瀏覽

技術 CSS沒有極限 - 利用Sass繪製扁平化風格的long-shadow

網頁設計的趨勢從擬物轉換為扁平化，而扁平化顧名思義就是較扁、較平，去除了真實化實體，扁平化也延伸出許多的視覺風格，而long shadow就是其中一種，讓扁平的...

卡斯伯 ‧ 2013-10-01

2 Like 0 留言 2664 瀏覽

鐵人賽開發技術 DAY 21

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

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

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

廖洧杰 ‧ 2014-10-07

1 Like 1 留言 2600 瀏覽

鐵人賽 Modern Web DAY 24

CSS 實戰心法系列第 24 篇

技術實戰心法 - 自幹 Grid System

自己本身是不常自幹 Grid，但透過自幹會了解更細的運作原理，grid system 和其他元件不太一樣，他是屬於外容器型的元件，一層包覆著一層變化性相當高，如...

卡斯伯 ‧ 2016-12-24

5 Like 1 留言 2598 瀏覽