Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sass-Front-End Developers Taiwan Party - 5

3,514 views

Published on

Published in: Technology
  • Be the first to comment

Sass-Front-End Developers Taiwan Party - 5

  1. 1. CSS with superpowers
  2. 2. • • • •
  3. 3. • • •
  4. 4. • •
  5. 5. .menu{ } .menu ul { } .menu li { } .menu a { } .. .. .. .. .menu{ ul { } li { } a { } } .. .menu .. ul .. .. .. li a .. ..
  6. 6. $text-color:#f00; body{ color:$text-color; } body{ color:#f00; }
  7. 7. $blue:#ae81ff; .menu a{color:$blue} .shop h1{color:$blue} .menu a{color:#ae81ff} .shop h1{color:#ae81ff}
  8. 8. $text-color:#f00; $font-size:13px; $big-img:"../images/big/"; $width:960px; .shop li{ width: $width / 4 240px }
  9. 9. • • • • • • •
  10. 10. .menu h2{..} ..300 .content h2{..} ..300 .sidebar h2{..} • • •
  11. 11. .menu h2,.content h2,.sidebar h2{10 line..} ..300 .content ul{..} ..300 .sidebar span{..}
  12. 12. %site-h2{10 line CSS..} .menu h2{ @extend %site-h2 } ..300 .content h2{ @extend %site-h2 } .content ul{..} ..300 .sidebar h2{ @extend %site-h2 } .sidebar span{..}
  13. 13. .menu h2,.content h2,.sidebar h2{10 line..} ..300 .content ul{..} ..300 .sidebar span{..}
  14. 14. %btn{10 line CSS..} .btn-primary{ @extend %btn; background:blue; color:white; } .btn-danger{ @extend %btn; background:green; color:white; }
  15. 15. .btn-primary,.btn-danger{10 line CSS..} .btn-primary{ background:blue; color:white; } .btn-danger{ background:green; color:white; }
  16. 16. • •
  17. 17. • • • • •
  18. 18. • • •
  19. 19. @mixin hide-text { .header h1 { text-indent:110%; text-indent:110%; white-space:norwrap; white-space:norwrap; overflow:hidden; overflow:hidden; } } .header h1 { @include hide-text; … }
  20. 20. @mixin circle($size,$bgcolor) { border-radius:50%; height:$size; width:$size; font-size:$size / 3; background:$bgcolor; } .box { @include circle(30px,#fff) } Hello! Hello!
  21. 21. • • • •
  22. 22. http://susy.oddbird.net/
  23. 23. • • •
  24. 24. http://thecssguru.freeiz.com/animate/
  25. 25. .shake { @include animate(shake,3s,2s) }
  26. 26. • • •
  27. 27. @import @import @import @import @import @import @import mixin //放置所有全域變數與Mixin reset // reset.css extend // 都放@extend用的檔案 layout //共同框架 index //首頁 page //內頁 xxx //各單元CSS
  28. 28. http://www.getmarkman.com/
  29. 29. http://www.getmarkman.com/
  30. 30. • •

×