Upload
-
View
2.104
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
CSS with superpowers
•
•
•
•
•
•
•
•
•
.menu{..}
.menu ul {..}
.menu li {..}
.menu a {..}
.menu{ ul {..} li {..} a {..} }
.menu .. ul .. li .. a ..
body{ color:#f00; }
$text-color:#f00; body{ color:$text-color; }
$blue:#ae81ff; .menu a{color:$blue} .shop h1{color:$blue}
.menu a{color:#ae81ff}
.shop h1{color:#ae81ff}
$text-color:#f00; $font-size:13px; $big-img:"../images/big/"; $width:960px; .shop li{ width: $width / 4 240px }
••
•
•
•
•
•
•
•
•
.menu h2{..}
..300
.content h2{..}
..300
.sidebar h2{..}
.menu h2,.content h2,.sidebar h2{10 line..}
..300
.content ul{..}
..300
.sidebar span{..}
%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{..}
.menu h2,.content h2,.sidebar h2{10 line..}
..300
.content ul{..}
..300
.sidebar span{..}
%btn{10 line CSS..} .btn-primary{ @extend %btn; background:blue; color:white; }
.btn-danger{ @extend %btn; background:green; color:white; }
.btn-primary,.btn-danger{10 line CSS..} .btn-primary{ background:blue; color:white; }
.btn-danger{ background:green; color:white; }
•
•
•
•
•
•
•
•
•
•
@mixin hide-text { text-indent:110%; white-space:norwrap; overflow:hidden; } .header h1 { @include hide-text; … }
.header h1 { text-indent:110%; white-space:norwrap; overflow:hidden; }
@mixin circle($size,$bgcolor) { border-radius:50%; height:$size; width:$size; font-size:$size / 3; background:$bgcolor; } .box { @include circle(30px,#fff) }
Hello!
Hello!
•
•
•
•
http://susy.oddbird.net/
•
•
•
http://thecssguru.freeiz.com/animate/
.shake { @include animate(shake,3s,2s) }
•
•
•
@import mixin //放置所有全域變數與Mixin
@import reset // reset.css
@import extend // 都放@extend用的檔案
@import layout //共同框架
@import index //首頁
@import page //內頁
@import xxx //各單元CSS
http://www.getmarkman.com/
http://www.getmarkman.com/