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

4 Like 0 留言 4792 瀏覽

鐵人賽開發技術 DAY 27

CSS沒有極限系列第 23 篇

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

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

卡斯伯 ‧ 2013-10-12

5 Like 0 留言 4738 瀏覽

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

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

no027843 ‧ 2020-06-02

2 Like 0 留言 4698 瀏覽

鐵人賽開發技術 DAY 38

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

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

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

廖洧杰 ‧ 2014-10-24

3 Like 0 留言 4619 瀏覽

鐵人賽開發技術 DAY 31

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

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

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

廖洧杰 ‧ 2014-10-17

2 Like 0 留言 4512 瀏覽

鐵人賽開發技術 DAY 23

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

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

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

廖洧杰 ‧ 2014-10-09

1 Like 1 留言 4510 瀏覽

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

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

廖洧杰 ‧ 2014-05-16

2 Like 0 留言 4437 瀏覽

鐵人賽開發技術 DAY 34

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

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

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

廖洧杰 ‧ 2014-10-20

3 Like 0 留言 4402 瀏覽

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

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

Ares ‧ 2019-08-05

0 Like 0 留言 4391 瀏覽

鐵人賽自我挑戰組 DAY 14

30 天轉生到 bootstrap 5 的意識界系列第 14 篇

技術第 14 集：Bootstrap 客製化 Sass 原始碼架構 import 路徑

此篇會介紹 Bootstrap 客製化 sass 原始碼架構，著重在如何使用原始碼來客製化自己的 Bootstrap 環境。 Sass 架構官網推薦的客...

Kent ‧ 2021-09-29

5 Like 1 留言 4359 瀏覽

鐵人賽開發技術 DAY 1

CSS沒有極限系列第 1 篇

技術 CSS沒有極限Intro

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

卡斯伯 ‧ 2013-09-16

1 Like 0 留言 4284 瀏覽

鐵人賽開發技術 DAY 17

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

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

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

廖洧杰 ‧ 2014-10-03

0 Like 0 留言 4163 瀏覽

鐵人賽自我挑戰組 DAY 12

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

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

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

凱特麻麻桑 ‧ 2018-10-27

2 Like 0 留言 4139 瀏覽

鐵人賽開發技術 DAY 22

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

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

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

廖洧杰 ‧ 2014-10-08

1 Like 1 留言 4135 瀏覽

鐵人賽 Modern Web DAY 21

CSS 實戰心法系列第 21 篇

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

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

卡斯伯 ‧ 2016-12-21

1 Like 0 留言 3994 瀏覽

鐵人賽開發技術 DAY 18

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

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

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

廖洧杰 ‧ 2014-10-04

1 Like 0 留言 3932 瀏覽

鐵人賽開發技術 DAY 35

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

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

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

廖洧杰 ‧ 2014-10-21

1 Like 0 留言 3894 瀏覽

鐵人賽開發技術 DAY 10

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

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

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

廖洧杰 ‧ 2014-09-26

1 Like 0 留言 3803 瀏覽

鐵人賽開發技術 DAY 12

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

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

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

廖洧杰 ‧ 2014-09-28

0 Like 0 留言 3797 瀏覽

鐵人賽自我挑戰組 DAY 28

30 天轉生到 bootstrap 5 的意識界系列第 28 篇

技術第 28 集：Bootstrap 客製化 component 元件樣式

此篇會介紹如何修改 Bootstrap 元件樣式。事前準備須先了解變數設置、通用類別設置，再繼續閱讀會更好消化呦。 _variable.scss...

Kent ‧ 2021-10-13

3 Like 1 留言 3716 瀏覽

鐵人賽開發技術 DAY 1

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

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

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

廖洧杰 ‧ 2014-09-17

8 Like 4 留言 3696 瀏覽

鐵人賽開發技術 DAY 30

CSS沒有極限系列第 26 篇

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

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

卡斯伯 ‧ 2013-10-15

0 Like 0 留言 3684 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

Eudora ‧ 2020-09-27

9 Like 4 留言 3588 瀏覽

鐵人賽開發技術 DAY 2

CSS沒有極限系列第 2 篇

技術 CSS 的改變

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

卡斯伯 ‧ 2013-09-17

1 Like 2 留言 3571 瀏覽

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

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

廖洧杰 ‧ 2015-04-01

2 Like 0 留言 3525 瀏覽

鐵人賽開發技術 DAY 20

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

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

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

廖洧杰 ‧ 2014-10-06

1 Like 0 留言 3486 瀏覽

鐵人賽 Modern Web DAY 26

CSS 實戰心法系列第 26 篇

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

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

卡斯伯 ‧ 2016-12-26

3 Like 0 留言 3465 瀏覽

鐵人賽開發技術 DAY 30

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

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

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

廖洧杰 ‧ 2014-10-16

1 Like 0 留言 3420 瀏覽

鐵人賽開發技術 DAY 16

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

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

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

廖洧杰 ‧ 2014-10-02

1 Like 1 留言 3319 瀏覽

鐵人賽 Modern Web DAY 24

CSS 實戰心法系列第 24 篇

技術實戰心法 - 自幹 Grid System

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

卡斯伯 ‧ 2016-12-24

5 Like 1 留言 3229 瀏覽