1. CSS with superpowers

2. •
•
•
•

3. •
•
•

5. •
•

8. .menu{ }
.menu ul { }
.menu li { }
.menu a { }
..
..
..
..
.menu{
ul { }
li { }
a { }
}
..
.menu
..
ul
..
..
..
li
a
..
..

10. $text-color:#f00;
body{
color:$text-color;
}
body{
color:#f00;
}

11. $blue:#ae81ff;
.menu a{color:$blue}
.shop h1{color:$blue}
.menu a{color:#ae81ff}
.shop h1{color:#ae81ff}

12. $text-color:#f00;
$font-size:13px;
$big-img:"../images/big/";
$width:960px;
.shop li{
width: $width / 4
240px
}

13. •
•
•
•
•
•
•

15. .menu h2{..}
..300
.content h2{..}
..300
.sidebar h2{..}
•
•
•

16. .menu h2,.content h2,.sidebar h2{10 line..}
..300
.content ul{..}
..300
.sidebar span{..}

17. %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{..}

18. .menu h2,.content h2,.sidebar h2{10 line..}
..300
.content ul{..}
..300
.sidebar span{..}

19. %btn{10 line CSS..}
.btn-primary{
@extend %btn;
background:blue;
color:white;
}
.btn-danger{
@extend %btn;
background:green;
color:white;
}

20. .btn-primary,.btn-danger{10 line CSS..}
.btn-primary{
background:blue;
color:white;
}
.btn-danger{
background:green;
color:white;
}

21. •
•

23. •
•
•
•
•

24. •
•
•

27. @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;
…
}

31. @mixin circle($size,$bgcolor) {
border-radius:50%;
height:$size;
width:$size;
font-size:$size / 3;
background:$bgcolor;
}
.box {
@include circle(30px,#fff)
}
Hello!
Hello!

33. •
•
•
•

34. http://susy.oddbird.net/

35. •
•
•

36. http://thecssguru.freeiz.com/animate/

37. .shake {
@include animate(shake,3s,2s)
}

38. •
•
•

41. @import
@import
@import
@import
@import
@import
@import
mixin //放置所有全域變數與Mixin
reset // reset.css
extend // 都放@extend用的檔案
layout //共同框架
index //首頁
page //內頁
xxx
//各單元CSS

42. http://www.getmarkman.com/

43. http://www.getmarkman.com/

44. •
•