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

0 Like 0 留言 6026 瀏覽

鐵人賽 Modern Web DAY 9

Webpack with ASP.NET MVC 系列第 9 篇

技術 ASP.NET MVC 導入 SASS

專案使用 SCSS 寫法，我們之前用 Gulp 來 Compile，也使用過 ASP.NET MVC Web Compiler 來處理，後者的缺點是必須使用 V...

TYSON ‧ 2018-10-09

1 Like 0 留言 11456 瀏覽

鐵人賽 Modern Web DAY 26

實作小範例入門 Vue & Vuex 2.0 系列第 26 篇

技術 vue & vuex 26 - 使用 SASS 管理 CSS - webpack sass-loader

今天我們將改變 CSS 引用方式，改為使用 SASS 開發，管理我們的 CSS，因此 style tag 也可以寫 SCSS 囉！今天目標：移除從 st...

Jasper ‧ 2016-12-27

1 Like 0 留言 3085 瀏覽

鐵人賽 Modern Web DAY 26

CSS 實戰心法系列第 26 篇

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

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

卡斯伯 ‧ 2016-12-26

1 Like 1 留言 2659 瀏覽

鐵人賽 Modern Web DAY 25

CSS 實戰心法系列第 25 篇

技術實戰心法 - Sass Map 快出產出大量樣式

上一篇介紹了很短的程式碼產生一整組 Grid System，然後還提供變數讓 Grid 還有額外的參數可以設定，手寫的 CSS 如果要重新計算 12 組以上的計...

卡斯伯 ‧ 2016-12-25

1 Like 1 留言 2746 瀏覽

鐵人賽 Modern Web DAY 24

CSS 實戰心法系列第 24 篇

技術實戰心法 - 自幹 Grid System

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

卡斯伯 ‧ 2016-12-24

1 Like 1 留言 3445 瀏覽

鐵人賽 Modern Web DAY 21

CSS 實戰心法系列第 21 篇

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

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

卡斯伯 ‧ 2016-12-21

1 Like 2 留言 3448 瀏覽

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

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

廖洧杰 ‧ 2015-04-01

5 Like 0 留言 18599 瀏覽

鐵人賽開發技術 DAY 45

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

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

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

廖洧杰 ‧ 2014-10-31

1 Like 1 留言 9095 瀏覽

鐵人賽開發技術 DAY 44

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

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

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

廖洧杰 ‧ 2014-10-30

1 Like 0 留言 6659 瀏覽

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

鐵人賽開發技術 DAY 42

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

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

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

廖洧杰 ‧ 2014-10-28

0 Like 0 留言 5163 瀏覽

鐵人賽開發技術 DAY 41

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

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

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

廖洧杰 ‧ 2014-10-27

1 Like 0 留言 10425 瀏覽

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

鐵人賽開發技術 DAY 39

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

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

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

廖洧杰 ‧ 2014-10-25

2 Like 0 留言 4307 瀏覽

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

鐵人賽開發技術 DAY 37

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

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

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

廖洧杰 ‧ 2014-10-23

2 Like 0 留言 2441 瀏覽

鐵人賽開發技術 DAY 36

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

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

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

廖洧杰 ‧ 2014-10-22

1 Like 0 留言 3706 瀏覽

鐵人賽開發技術 DAY 35

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

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

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

廖洧杰 ‧ 2014-10-21

2 Like 0 留言 3978 瀏覽

鐵人賽開發技術 DAY 34

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

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

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

廖洧杰 ‧ 2014-10-20

4 Like 1 留言 28849 瀏覽

鐵人賽開發技術 DAY 33

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

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

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

廖洧杰 ‧ 2014-10-19

5 Like 1 留言 8218 瀏覽

鐵人賽開發技術 DAY 32

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

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

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

廖洧杰 ‧ 2014-10-18

3 Like 0 留言 4312 瀏覽

鐵人賽開發技術 DAY 31

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

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

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

廖洧杰 ‧ 2014-10-17

3 Like 0 留言 3173 瀏覽

鐵人賽開發技術 DAY 30

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

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

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

廖洧杰 ‧ 2014-10-16

3 Like 1 留言 4846 瀏覽

鐵人賽開發技術 DAY 29

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

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

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

廖洧杰 ‧ 2014-10-15

1 Like 1 留言 6738 瀏覽

鐵人賽開發技術 DAY 28

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

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

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

廖洧杰 ‧ 2014-10-14

2 Like 0 留言 19486 瀏覽

鐵人賽開發技術 DAY 27

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

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

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

廖洧杰 ‧ 2014-10-13

2 Like 0 留言 8241 瀏覽

鐵人賽開發技術 DAY 26

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

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

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

廖洧杰 ‧ 2014-10-12

1 Like 1 留言 29268 瀏覽

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

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

鐵人賽開發技術 DAY 23

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

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

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

廖洧杰 ‧ 2014-10-09