Sass-Front-End Developers Taiwan Party - 5
-
Upload
- -
Category
Technology
-
view
2.104 -
download
1
description
Transcript of Sass-Front-End Developers Taiwan Party - 5
![Page 1: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/1.jpg)
CSS with superpowers
![Page 2: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/2.jpg)
•
•
•
•
![Page 3: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/3.jpg)
•
•
•
![Page 4: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/4.jpg)
![Page 5: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/5.jpg)
•
•
![Page 6: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/6.jpg)
![Page 7: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/7.jpg)
![Page 8: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/8.jpg)
.menu{..}
.menu ul {..}
.menu li {..}
.menu a {..}
.menu{ ul {..} li {..} a {..} }
.menu .. ul .. li .. a ..
![Page 9: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/9.jpg)
![Page 10: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/10.jpg)
body{ color:#f00; }
$text-color:#f00; body{ color:$text-color; }
![Page 11: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/11.jpg)
$blue:#ae81ff; .menu a{color:$blue} .shop h1{color:$blue}
.menu a{color:#ae81ff}
.shop h1{color:#ae81ff}
![Page 12: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/12.jpg)
$text-color:#f00; $font-size:13px; $big-img:"../images/big/"; $width:960px; .shop li{ width: $width / 4 240px }
![Page 13: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/13.jpg)
••
•
•
•
•
•
![Page 14: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/14.jpg)
![Page 15: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/15.jpg)
•
•
•
.menu h2{..}
..300
.content h2{..}
..300
.sidebar h2{..}
![Page 16: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/16.jpg)
.menu h2,.content h2,.sidebar h2{10 line..}
..300
.content ul{..}
..300
.sidebar span{..}
![Page 17: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/17.jpg)
%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{..}
![Page 18: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/18.jpg)
.menu h2,.content h2,.sidebar h2{10 line..}
..300
.content ul{..}
..300
.sidebar span{..}
![Page 19: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/19.jpg)
%btn{10 line CSS..} .btn-primary{ @extend %btn; background:blue; color:white; }
.btn-danger{ @extend %btn; background:green; color:white; }
![Page 20: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/20.jpg)
.btn-primary,.btn-danger{10 line CSS..} .btn-primary{ background:blue; color:white; }
.btn-danger{ background:green; color:white; }
![Page 21: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/21.jpg)
•
•
![Page 22: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/22.jpg)
![Page 23: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/23.jpg)
•
•
•
•
•
![Page 24: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/24.jpg)
•
•
•
![Page 25: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/25.jpg)
![Page 26: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/26.jpg)
![Page 27: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/27.jpg)
@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; }
![Page 28: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/28.jpg)
![Page 29: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/29.jpg)
![Page 30: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/30.jpg)
![Page 31: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/31.jpg)
@mixin circle($size,$bgcolor) { border-radius:50%; height:$size; width:$size; font-size:$size / 3; background:$bgcolor; } .box { @include circle(30px,#fff) }
Hello!
Hello!
![Page 32: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/32.jpg)
![Page 33: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/33.jpg)
•
•
•
•
![Page 34: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/34.jpg)
http://susy.oddbird.net/
![Page 35: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/35.jpg)
•
•
•
![Page 36: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/36.jpg)
http://thecssguru.freeiz.com/animate/
![Page 37: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/37.jpg)
.shake { @include animate(shake,3s,2s) }
![Page 38: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/38.jpg)
•
•
•
![Page 39: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/39.jpg)
![Page 40: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/40.jpg)
![Page 41: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/41.jpg)
@import mixin //放置所有全域變數與Mixin
@import reset // reset.css
@import extend // 都放@extend用的檔案
@import layout //共同框架
@import index //首頁
@import page //內頁
@import xxx //各單元CSS
![Page 42: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/42.jpg)
http://www.getmarkman.com/
![Page 43: Sass-Front-End Developers Taiwan Party - 5](https://reader033.fdocuments.net/reader033/viewer/2022051608/540dd0ff8d7f72747e8b4b7a/html5/thumbnails/43.jpg)
http://www.getmarkman.com/