iT邦幫忙

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

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

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

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

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

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

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

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

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

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

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

鐵人賽 開發技術 DAY 45
30天掌握Sass語法 系列 第 41

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

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

鐵人賽 開發技術 DAY 44
30天掌握Sass語法 系列 第 40

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

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

鐵人賽 開發技術 DAY 43
30天掌握Sass語法 系列 第 39

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

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

鐵人賽 開發技術 DAY 42
CSS沒有極限 系列 第 38

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

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

鐵人賽 開發技術 DAY 42
30天掌握Sass語法 系列 第 38

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

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

鐵人賽 開發技術 DAY 41
CSS沒有極限 系列 第 37

技術 CSS - Flex的對齊

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

鐵人賽 開發技術 DAY 41
30天掌握Sass語法 系列 第 37

技術 Sass開發流程設計 - (11) Prepos 前端利器介紹

如果你希望可以立即寫Sass, 不用去設定繁瑣的安裝流程, 除了fire.app以外, 你也可以選擇使用prepos, 只要下載安裝完就可以直接玩Sass, 這...

鐵人賽 開發技術 DAY 40
CSS沒有極限 系列 第 36

技術 CSS - Flex的排版方式

css 範例:http://ashareaday.wcc.tw/#2013-10-25 flex是用來排版的CSS屬性,在本章就用所了解的flex來排版看看,並...

鐵人賽 開發技術 DAY 40
30天掌握Sass語法 系列 第 36

技術 Sass開發流程設計 - (10)Susy 版型種類介紹

這一次我想聊的是關於susy所提供的grid種類, 因為他不單單只能設計RWD版型而已, 一些常見的網頁版型設定也都有支援提供, 後面如果有時間的話也會設計一個...

鐵人賽 開發技術 DAY 39
CSS沒有極限 系列 第 35

技術 CSS - display: box 與 display: flex

CSS範例:[http://ashareaday.wcc.tw/#2013-10-24 ](http://ashareaday.wcc.tw/#2013-10-...

鐵人賽 開發技術 DAY 39
30天掌握Sass語法 系列 第 35

技術 Sass開發流程設計 - (9) Off-Canvas layout with Susy

這篇文章竟然花了我7個小時XDD 中間忘了存檔重打外, 重新打一遍又發現到新的觀念, 於是又越拖越晚...冏, 不過終於開始講到我想分享的一些較深入的Sass設...

鐵人賽 開發技術 DAY 38
30天掌握Sass語法 系列 第 34

技術 Sass開發流程設計 - (8) susy grid教學(2)

本日susy重點: 1.利用omega並排元素內容 2.透過isolation來達成Responsive image gallery grid 在以往我們在設...

鐵人賽 開發技術 DAY 22
作個網站吧! 系列 第 22

技術 作個網站吧!Quickly Sass(4)-CSS無痛轉移Sass

既然開始學Sass了,以前的檔案當然也要趁機會轉成Sass,練習兼整理,一舉兩得~ 既然開始學Sass了,以前的檔案當然也要趁機會轉成Sass,練習兼整理,一舉...

鐵人賽 開發技術 DAY 37
30天掌握Sass語法 系列 第 33

達標好文 技術 Sass開發流程設計 - (7) susy grid教學(1)

由於行動裝置的逐步普及, Responsive Web Design(RWD)也逐漸變為市場趨勢, 所以這裡也來聊一下關於RWD的Sass格線系統, 在以前Sa...

鐵人賽 開發技術 DAY 36
30天掌握Sass語法 系列 第 32

技術 Sass開發流程設計 - (6) 如何逐步整合自己的Sass資料夾

在開發數個網站後, 網頁設計師通常都會思考該如何化繁為簡地設計自己的開發流程, 今天則就提供一些心法讓剛碰觸Sass的朋友了解該如何整合自己的Sass資料, 範...

鐵人賽 開發技術 DAY 35
CSS沒有極限 系列 第 31

技術 CSS3 垂直文字書寫

html最早都是應用於拉丁文上,而拉丁文主要是水平由左到右的書寫方式,而到了其他的語系國家,文字也只能用水平由左到右的書寫方式;而漢字是屬於垂直書寫由右到左的書...

鐵人賽 開發技術 DAY 35
30天掌握Sass語法 系列 第 31

技術 Sass開發流程設計 - (5) Sass設計資源整理

除了閉門造車設計Sass網站設計流程外, 我自己也時常會去搜尋其他網頁設計師的Sass資源, 再去從對方的設計風格和理念找出優缺, 衡量是否該改善我自己撰寫Sa...

鐵人賽 開發技術 DAY 19
作個網站吧! 系列 第 19

技術 作個網站吧!Quickly Sass(1)-少動點兒手:Sass使用心得

雖然年初就已經知道Sass, 但是實際學習與應用卻是在這一兩個月. 坦白說我自己一開始認為很難, 怕用了之後反而不會寫CSS, 以及編譯的問題而產生有點抗拒的心...

鐵人賽 開發技術 DAY 34
CSS沒有極限 系列 第 30

技術 Animation 的各項設定值(2)

[ animation-delay ]:檢索或設置對象動畫延遲的時間 [ animation-iteration-count ]:檢索或設置物件動畫的迴圈次數...

鐵人賽 開發技術 DAY 34
30天掌握Sass語法 系列 第 30

技術 Sass開發流程設計 - (4) 排版流程(下)

延續昨天的版面, 已將所有的大框架建立好了, 這裡先來提自己的排版流程習慣: 1.我習慣先把大框架設定用好後,再來微調各元素間的距離。 2.在排網頁時,我會先將...

鐵人賽 開發技術 DAY 33
30天掌握Sass語法 系列 第 29

技術 Sass開發流程設計 - (3) 網頁排版流程(上)

延續第二章, 我們就開始排網頁了。 由於一天時間有限, 所以分上下兩集來播放與解說。 你可以從影片內容可以發現到, 一個網頁設計在排版時, 在一邊進行前端設計時...

鐵人賽 開發技術 DAY 32
30天掌握Sass語法 系列 第 28

技術 Sass開發流程設計 - (2) Sass結構規劃、全域變數設定

切完所有圖片後, 就可以開始規劃Sass檔案了, 當你今天新建立一個Sass專案時, 裡面預設會有print、ie、screen的Sass檔案, 第一次撰寫Sa...

鐵人賽 開發技術 DAY 31
30天掌握Sass語法 系列 第 27

技術 Sass開發流程設計 - (1) 切圖、規劃Layout

關於Sass的基礎在前30天已經介紹得差不多了, 但畢竟理論的東西要導入自己的實務開發流程始終會有陣痛期。 所以之後的文章我會用Sass從無到有實際做一個版型出...

鐵人賽 開發技術 DAY 30
CSS沒有極限 系列 第 26

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

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

鐵人賽 開發技術 DAY 29
30天掌握Sass語法 系列 第 25

技術 30天掌握Sass語法 - (29) @for+random()創造無限可能

for迴圈不論是在哪個程式語言上都非常的常見, 這一次則是介紹Sass @for的運用方法。 我們先來一個簡單的範例 @for $i from 1 throu...

鐵人賽 開發技術 DAY 28
CSS沒有極限 系列 第 24

技術 CSS沒有極限 - CSS only responsive navigation

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-13 (建議使用Chrome瀏覽器) 這篇要介紹的是noscript的C...