Sass-Front-End Developers Taiwan Party - 5

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/

•

•