Download - Sass
![Page 1: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/1.jpg)
SASS Super awesome stylesheets
![Page 2: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/2.jpg)
Who am I?
![Page 3: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/3.jpg)
Who am I?
#me {
name: ‘Bram Verdyck’;
&:active {
job: ‘Web ninja @ These Days’;
interests: ‘HTML5, CSS3, JS, Fast cars’;
social: ‘@TroTi13’;
}
&:before {
school:’MCT @ KDG’;
}
}
![Page 4: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/4.jpg)
What’s this about? Image source: http://thekingofthevikings.deviantart.com/art/8-Bit-
Question-Box-170241434
![Page 5: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/5.jpg)
What’s this about?
S.A.S.S Syntactically awesome style sheets Super awesome style sheets
Image source: http://sass-lang.com/
![Page 6: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/6.jpg)
What’s wrong with normal style sheets?
Image source: http://webwox.wordpress.com/2011/08/31/history-of-cascading-style-sheetscss/
![Page 7: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/7.jpg)
Nothing really…
![Page 8: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/8.jpg)
CSS is awesome!
Image source: http://www.zazzle.com/css_is_awesome_with_scroll_mug-168224268218561554
![Page 9: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/9.jpg)
CSS let’s you make pretty things
Image source: http://www.onlymotivational.com/pictures/i_feel_pretty.htm
![Page 10: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/10.jpg)
Without it, all websites would look the same
Image source: http://kill.devc.at/node/284
![Page 11: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/11.jpg)
But…
![Page 12: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/12.jpg)
Developing CSS is slow Image source: http://www.tensionnot.com/pictures/Car/Horse-Cart-Car
![Page 13: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/13.jpg)
CSS is
repetitive
Image source: http://www.123rf.com/photo_5880238_windows-shaped-like-space-invaders-on-building-canada-tower-london-exterior.html
![Page 14: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/14.jpg)
CSS is messy
Image source: http://vickybeeching.com/blog/why-are-we-musicians-often-so-messy/messy-office-03/
![Page 15: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/15.jpg)
CSS needs external tools for optimization
![Page 16: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/16.jpg)
CSS isn’t really reusable
![Page 17: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/17.jpg)
WHAT CAN SASS DO FOR US? Most important stuff
![Page 18: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/18.jpg)
Nesting
![Page 19: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/19.jpg)
Be gone repetition Overview Better readability
#nav { float:left; width:100px; a { text-decoration:none; } }
#nav { float:left; width:100px; } #nav a { text-decoration:none; }
![Page 20: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/20.jpg)
Variables - $
![Page 21: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/21.jpg)
Wh00t? Variables in CSS? That’s just awesome!
$link-color:#000; #nav { float:left; width:100px; a { color:$link-color; text-decoration:none; } }
#nav { float:left; width:100px; } #nav a { color:#000; text-decoration:none; }
![Page 22: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/22.jpg)
Maths, calculations
![Page 23: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/23.jpg)
A + B A – B A * B A / B
$width:100px; #nav { height:100px – 2*15; padding:10px 15px; width:$width – 2*10; }
#nav { height:70px; padding:10px 15px; width:80px; }
![Page 24: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/24.jpg)
Lighten($color, amount) darken($color, amount) $color1 + $color2 $color1 - $color2
$color:#000; a { color:$color; &:hover { color:lighten($color, 10); } }
a { color:#000; &:hover { color:#1a1a1a; } }
![Page 25: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/25.jpg)
Mixins - @mixin
![Page 26: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/26.jpg)
Reusable ++ Readability ++ @mixin hover-link($color) { & { color:$color; } &:hover { color:$lighten($color,10); } } a { @include hover-link(#000); }
![Page 27: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/27.jpg)
Import - @import
![Page 28: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/28.jpg)
Multiple files Compiled into 1 Only uses what you want @import ‘path/to/file.scss’;
![Page 29: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/29.jpg)
WHAT CAN SASS DO MORE? There’s more?!
![Page 30: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/30.jpg)
Loops
@for $i from 1 through 3 {} @each $el in h1, h2, h3, h4 {} $i:0; @while $i < 6 { $i: $i + 1 }
![Page 31: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/31.jpg)
Extend - @extend
.link { color:$link-color; &:hover { color:$lighten($color,10); } } a { @extend .link; }
![Page 32: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/32.jpg)
No more double code Less writing
![Page 33: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/33.jpg)
SASS also auto minifies & checks for errors :nested – default :expanded - normal :compact - every selector on 1 line :compressed - no more whitespaces
![Page 34: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/34.jpg)
Awesome right?
![Page 35: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/35.jpg)
HOW TO INSTALL / USE
![Page 36: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/36.jpg)
Easy as pie!
All you need is ruby
Image source: http://www.sw.it.aoyama.ac.jp/2009/pub/IUC33-ruby1.9/
![Page 37: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/37.jpg)
Mmm pie…. Image source: http://www.motivationals.org/demotivational-posters-1/
demotivational-poster-44122.jpg
![Page 38: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/38.jpg)
And 2 lines in terminal…
$ gem install sass $ cd path/to/css $ sass watch style.scss:style.css Or $ cd path/to/css $ sass watch css:css
![Page 39: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/39.jpg)
STOP, HAMMER RECAP TIME!
![Page 40: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/40.jpg)
Recap
• Nesting • Variables - $ • Maths & color functions • Mixins - @mixin • Import - @import
![Page 41: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/41.jpg)
AND STILL… THERE’S MORE
![Page 42: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/42.jpg)
COMPASS
![Page 43: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/43.jpg)
Compass <3 CSS 3
Image source: http://desandro.com/work/zui-site-riot/html5css3.png
![Page 44: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/44.jpg)
Loads of predefined & tested mixins
Image source: http://compass-style.org
![Page 45: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/45.jpg)
Blueprint grid system built in & ready to use
Image source: http://www.blueprintcss.org/
![Page 46: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/46.jpg)
Extended maths
pi() sin($number) cos($number) tan($number)
![Page 47: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/47.jpg)
Advanced sprite control
![Page 48: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/48.jpg)
STILL NOT CONVINCED?
![Page 49: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/49.jpg)
Check these links!
• http://sass-lang.com/ • http://compass-style.org/ • http://rubyinstaller.org/ (windows needs ruby installer)
• https://github.com/thesedays/scss-mixins
![Page 50: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/50.jpg)
And these links!
• http://www.thesedays.com • http://labs.thesedays.com
![Page 51: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/51.jpg)
THAT’S ABOUT IT…
![Page 52: Sass](https://reader033.vdocuments.us/reader033/viewer/2022051817/548c040fb4795983338b473d/html5/thumbnails/52.jpg)
DEMO PLZ?!