iT邦幫忙

sass相關文章
共有 125 則文章
鐵人賽 開發技術 DAY 34
Sass3.3 & CSS設計模式 系列 第 35

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

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

鐵人賽 開發技術 DAY 33
Sass3.3 & CSS設計模式 系列 第 34

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

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

鐵人賽 開發技術 DAY 32
Sass3.3 & CSS設計模式 系列 第 33

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

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

鐵人賽 開發技術 DAY 31
Sass3.3 & CSS設計模式 系列 第 32

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

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

鐵人賽 開發技術 DAY 30
Sass3.3 & CSS設計模式 系列 第 31

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

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

鐵人賽 開發技術 DAY 29
Sass3.3 & CSS設計模式 系列 第 30

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

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

鐵人賽 開發技術 DAY 28
Sass3.3 & CSS設計模式 系列 第 29

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

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

鐵人賽 開發技術 DAY 27
Sass3.3 & CSS設計模式 系列 第 28

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

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

鐵人賽 開發技術 DAY 26
Sass3.3 & CSS設計模式 系列 第 27

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

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

鐵人賽 開發技術 DAY 25
Sass3.3 & CSS設計模式 系列 第 26

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

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

鐵人賽 開發技術 DAY 24
Sass3.3 & CSS設計模式 系列 第 25

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

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

鐵人賽 開發技術 DAY 23
Sass3.3 & CSS設計模式 系列 第 24

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

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

鐵人賽 開發技術 DAY 22
Sass3.3 & CSS設計模式 系列 第 23

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

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

鐵人賽 開發技術 DAY 21
Sass3.3 & CSS設計模式 系列 第 22

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

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

鐵人賽 開發技術 DAY 20
Sass3.3 & CSS設計模式 系列 第 21

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

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

鐵人賽 開發技術 DAY 19
Sass3.3 & CSS設計模式 系列 第 20

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

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

鐵人賽 開發技術 DAY 18
Sass3.3 & CSS設計模式 系列 第 19

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

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

鐵人賽 開發技術 DAY 17
Sass3.3 & CSS設計模式 系列 第 18

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

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

鐵人賽 開發技術 DAY 16
Sass3.3 & CSS設計模式 系列 第 17

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

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

鐵人賽 開發技術 DAY 15
Sass3.3 & CSS設計模式 系列 第 16

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

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

鐵人賽 開發技術 DAY 13
Sass3.3 & CSS設計模式 系列 第 14

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

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

鐵人賽 開發技術 DAY 12
Sass3.3 & CSS設計模式 系列 第 13

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

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

鐵人賽 開發技術 DAY 11
Sass3.3 & CSS設計模式 系列 第 12

技術 Sass教學 (11) - @content

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

鐵人賽 開發技術 DAY 10
Sass3.3 & CSS設計模式 系列 第 11

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

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

鐵人賽 開發技術 DAY 9
Sass3.3 & CSS設計模式 系列 第 10

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

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

鐵人賽 開發技術 DAY 8
Sass3.3 & CSS設計模式 系列 第 9

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

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

鐵人賽 開發技術 DAY 7
Sass3.3 & CSS設計模式 系列 第 8

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

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

鐵人賽 開發技術 DAY 6
Sass3.3 & CSS設計模式 系列 第 7

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

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

鐵人賽 開發技術 DAY 4
Sass3.3 & CSS設計模式 系列 第 5

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

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

鐵人賽 開發技術 DAY 3
Sass3.3 & CSS設計模式 系列 第 4

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

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