Your SlideShare is downloading. ×
自從學會Sass / Compass後,考試都考100分!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

自從學會Sass / Compass後,考試都考100分!

1,795
views

Published on

自從學會Sass / Compass後,考試都考100分!

自從學會Sass / Compass後,考試都考100分!

Published in: Education

0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,795
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
23
Comments
0
Likes
25
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ⾃自從學會Sass / Compass後, 考試都考100分! 講者:廖洧杰
  • 2. About Me • 前端⼯工程師 • Desktop / Mobile 前端開發 • ⾼高雄前端發起⼈人 (2013/3) • 撰寫Sass教學⼿手冊 • ⾼高雄、台北舉辦Sass課程(14hr)
  • 3. Sass 3.3
  • 4. ⽗父選擇符:&
  • 5. Sass 3.2 .box { font-weight: bold; &:hover { color: blue; } .no-js & { font-weight: normal; } } SCSS .box { font-weight: bold; } .box:hover{ color: blue; } .no-js .box{ font-weight: normal } CSS
  • 6. Sass 3.3 .box { color: blue &-module {..} &__item {..} &None {..} } .box2 { .. &-menu { ..
 &-link{..} } } SCSS .box {color:blue} .box-module{..} .box__item{..} .boxNone{..} ! .box2{..} .box2-menu{..} .box2-menu-link{..} CSS
  • 7. @content 可在@mixin裡撰寫程式碼
  • 8. @Mixin + @content @Mixin example($bgcolor) { background: $bgcolor; @content; } ! .selector{ @include example(pink){ color:blue; } } .selector{ background:pink; color:blue; } CSSSCSS
  • 9. @content + RWD(抽象命名) @mixin RWD($width) { @media(max-width: $width){ @content; } } $mobile:320px; .box{ color:black; @include RWD($mobile){ color:blue; } } SCSS .box{ color:black; } @media (max-width:320px){ .box{ color:blue; } } CSS
  • 10. @content + & (覆蓋樣式) @mixin ie6{ * html &{ @content; } } ! #logo{ background:url(a.png); @include ie6{ background: url(a.gif); } } SCSS #logo{ background: url(a.png);} ! * html #logo{ background: url(a.gif); } ! CSS
  • 11. @content + & (連結狀態) @mixin link{ &:link,&:visited{@content;} } @mixin link-hover{ &:hover, &:focus, &:active{@content;} } .box{ height:50px; @include link{color:#fff}; @include link-hover{color:#000}; } SCSS ! .box{height:50px;} ! .box:link, .box:visited{color:#fff;} ! .box:hover, .box:focus, .box:active{color:#000;} CSS
  • 12. &與@content總結 • 利⽤用 & 會提取⽗父選擇符的觀念,節省程式碼負擔 • @content時常⽤用在狀態改變的情境上 • RWD • Browser hack • event(事件)
  • 13. @each + maps 透過變數批次產⽣生樣式
  • 14. @each+maps ⾃自動產⽣生class $colors:( white: #fff, blcak: #000 ) @each $name,$color in $colors{ .btn-#{$name}{background: $color}
 } SCSS ! .btn-white{background:#fff;} .btn-blcak{background:#000;} ! ! ! CSS
  • 15. 表單 @each 兩組表格表格 表格 @each 兩組表格表格 按鈕 @each 透過maps⾃自動
 新增各元素樣式 maps 兩組按鈕樣式 $colors:( white: #fff, blcak: #000 )
  • 16. sass 3.3 source maps
  • 17. Sass 3.2 before
  • 18. source maps
  • 19. source maps 使⽤用流程 • 建⽴立source map ( ruby or software ) ! ! • 開啟chrome 開發⼈人員⼯工具
 scss --sourcemap sass/styles.scss public/styles.css settings > General > Enable CSS source maps
  • 20. 做到這裡,便可預覽,但不可編輯
  • 21. source maps 即時編輯更新 • 開啟chrome 開發⼈人員⼯工具,添⼊入專案資料夾 ! ! • ⾄至chrome Sources找專案裡的sass/styles.scss按 右鍵,點選 Map to Network Resource,並選擇 對應的伺服器相同檔名的style.scss檔。 Settings > Workspace > Floders > Add folder
  • 22. source maps延伸閱讀 • Getting started with CSS sourcemaps and in- browser Sass editing
 http://goo.gl/w1zbVg • Sass 3.3 Source Maps
 http://goo.gl/rf3xLH

  • 23. ⾃自動產⽣生樣式表 透過在CSS / SCSS / SASS上寫註解,
 依規則編譯出網⾴頁樣式表
  • 24. 線上程式碼服務 ⽀支援 SCSS / SASS codepen JS Bin SassMeister
  • 25. Thanks
  • 26. ⾏行動科技應⽤用開發者年會 http://mopcon.org/