高雄前端社群 #3 SASS workshop
75
SASS WORKSHOP 講者：廖洧杰(三木) 高雄前端社群＃3
-
Upload
- -
Category
Technology
-
view
130 -
download
5
description
Transcript of 高雄前端社群 #3 SASS workshop
SASS WORKSHOP
講者：廖洧杰(三木)
高雄前端社群＃3
社群創立緣起
在高雄 沒有管道交流..Orz
2013/3 RWD課程
#1 -如何逐步提升CSS的可模組化 #2 - 現代化網頁基礎排版技術
讓南部的網頁設計師有一個交流的場所與
管道
共同交流，一塊成長
之後還有很多議程
1. RWD 進階經驗分享 2. RWD Workshop 3. Sublime text 3 Workshop 4. 如何透過jQuery撰寫動畫效果。 5. Sass framwork (Susy、bootstrap) 6. Angular.js 7. CSS之OOCSS、SMACSS設計模式 8. CSS3 animation 9. web窗口合作流程分享
SASS Workshop
1. 為什麼網頁設計師需要SASS？ (50min)
2. SASS介紹(60min)
1. 王志誠 – CSS selector (10 min)
2. 以實務面切入SASS 語法教學
3. 工具分享(Sublime text 2、Compass、Fire.app)
3. 實際練習與操作(30min)
主題
為什麼網頁設計師需要學SASS？
目前的CSS在設計上容易遭受到一些瓶頸
狂複製貼上相同class
.Box{..}
寫CSS時狂複製貼上
.Box{..}
寫CSS時狂複製貼上
.Box{..}
.Box{..}
.Box{..}
.Box{..}
.Box{..}
.Box{..}
.Box{..}
.Box{..}
寫CSS時狂複製貼上
.Box h1{..}
.Box ul {..}
.Box li {..}
.Box li a {..}
.Box li a i {..}
.Box li a em {..}
.Box span {..}
.Box .box_inside {..}
寫CSS時狂複製貼上
.new-box h1{..}
.new-box ul {..}
.new-box li {..}
.Box li a {..}
.Box li a i {..}
.Box li a em {..}
.Box span {..}
.Box .box_inside {..}
模組化也很不方便
CSS3前綴詞改一個設定，同時要改多個
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
http://sonspring.com/journal/sass-for-designers
Live Demo
CSS設定
共通文字大小共4組樣式
傳統寫法 .content p{ font-size：13px } 300行 .footer span{font-size：13px } 300行 .sidebar h2{font-size：15px } 300行 .news a{font-size：25px }
傳統寫法 網站特性：
1. CSS碼共2500行
2.四種文字樣式設定行數共98行
3.這98行你只能靠印象一行一行去找出來
做完後你的客戶/老闆和妳說..
A字形改12px B字形改16px C字形再大一點 D字形改小一點 除了字形還有顏色、 線條粗一點巴拉巴拉~
老闆
一小時後我要開記者會，所以快點改好！
老闆
沒辦法那麼快好， 起碼要2~3個小時。 心裡OS：(嘎拎杯動做小叮噹..)
網頁設計師
什麼！只是改『一點點東西』也需要那麼久時間！
老闆
你太沒效率了！
幹！
但事情還是得解決（哭哭）
SASS 變數 $font-small: 13px $font-middle: 16px $font-big:30px $link-color:blue $link-hover: black $line-height: 1.2
SASS 變數 $font-small: 13px .header .header h2 font-size: $font-small 300行 .content{..} .content h2 font-size: $font-small
Live Demo
還好有了 SASS變數功能
無法有效模組化，並回收再利用
CSS設定
一個網站共有三處h2樣式是一樣的
不好的寫法 .header h2{..} .. 300行 .. .content h2{..} .. 300行 .. .sidebar h2{..}
傳統解決方案 .header h2, .content h2, .sidebar h2{..} 300行 .header {..} .header ul{..} 300行 .content{..} .content p{}
SASS extend %blue-h2 color: #blue background: #fff 300行 .header .header h2 @extend %blue-h2 300行 .content{..} .content h2 @extend %blue-h2
太多CSS hack要記， 久了就忘得七七八八
圖片取代文字 .text-hide{ white-space: nowrap; text-indent: 100%; overflow: hidden ; }
Inline-block IE hack .text-hide{ display: inline-block vertical-align: top zoom: 1 *display: inline }
SASS Mixin滿足一切 @mixin inline-block display: inline-block vertical-align: top zoom: 1 *display: inline h2 color: #000 @include inline-block
Live Demo
SASS能夠製造出自己的CSS內隱知識庫
總整理
SASS的優點
1. SASS變數與寫法可讓你一鍵修改所有CSS數值，減輕修改與複製貼上的負擔。
2. SASS extend 可讓你集中網頁樣式，並提升css可讀性、可維護性。
3. SASS Mixin製造自己的css知識庫
4. Sass搭上Compass = 神！
Take a break
Compass
支援SASS的工具
http://sonspring.com/journal/sass-for-designers
Compass部分功能
1.Image-url 2.image-height 3.image-width 4.CSS3 Mixins 5.CSS Sprites
Live Demo
在以前導入SASS+Compass 會有什麼瓶頸？
必須打指令新增專案
Compass.app
Fire.app
Fire.app高雄場 8/17
Sublime text 3
Sublime package control
1.Emmet (HTML、CSS利器)
2.SASS、SASS (支援高亮)
3.Goto-CSS-Declaration (追蹤CSS)
4.Emmet LiveStyle (自動更新)
個人Sass常用熱鍵 1.Ctrl+Enter、Ctrl+Shift+Enter
(跳到下一行、跳到上一行)
2.Ctrl+L、Ctrl+[、Ctrl+] (一行行選起來後向內外縮排)
3.Ctrl+D (同時修改）
4.Ctrl+P、Ctrl+R (尋找檔名與程式碼)
實務經驗分享 Grid System
實務經驗分享 無痛轉移現有CSS專案
實務經驗分享 如何自製常用mixin
練習 .news p{ font-size：13px } .news h2{ font-size：13px } .news h2 a{ font-size：13px } .news h2 a:hover{ font-size：13px }
變數練習 改一個變數後全部都改
.news h1{ color:#fff}
.news h2{ color:#fff}
.news h3{ color:#fff}
extend練習 請試著將程式碼變短
.news h1{ Font-size:13px Border-bottom: 1px solid #000 Background: red } .news h2 {前兩行,background: yellow} .news h3 {前兩行,background: black}
mixin練習 如何引入mixin到.new？ @mixin text-hide()
white-space: nowrap text-indent: 100% overflow: hidden
.new background：url(../img/a.jpg)
變數加總 .one的字型大小是多少？
$font-size: 12px .one font-size: $font-size +3px
mixin練習 .new的背景顏色？
@mixin box($a,$b) color: $a background: $b
.new @include box(black,orange)
END
台灣哪裡有機會看到大家共同練習同一個網頁版型？
THANK YOU
