SASS Super awesome stylesheets

Who am I?

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’;

}

}

What’s this about? Image source: http://thekingofthevikings.deviantart.com/art/8-Bit-

Question-Box-170241434

What’s this about?

S.A.S.S Syntactically awesome style sheets Super awesome style sheets

Image source: http://sass-lang.com/

What’s wrong with normal style sheets?

Image source: http://webwox.wordpress.com/2011/08/31/history-of-cascading-style-sheetscss/

Nothing really…

CSS is awesome!

Image source: http://www.zazzle.com/css_is_awesome_with_scroll_mug-168224268218561554

CSS let’s you make pretty things

Image source: http://www.onlymotivational.com/pictures/i_feel_pretty.htm

Without it, all websites would look the same

Image source: http://kill.devc.at/node/284

But…

Developing CSS is slow Image source: http://www.tensionnot.com/pictures/Car/Horse-Cart-Car

CSS is

repetitive

Image source: http://www.123rf.com/photo_5880238_windows-shaped-like-space-invaders-on-building-canada-tower-london-exterior.html

CSS is messy

Image source: http://vickybeeching.com/blog/why-are-we-musicians-often-so-messy/messy-office-03/

CSS needs external tools for optimization

CSS isn’t really reusable

WHAT CAN SASS DO FOR US? Most important stuff

Nesting

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; }

Variables - $

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; }

Maths, calculations

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; }

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; } }

Mixins - @mixin

Reusable ++ Readability ++ @mixin hover-link($color) { & { color:$color; } &:hover { color:$lighten($color,10); } } a { @include hover-link(#000); }

Import - @import

Multiple files Compiled into 1 Only uses what you want @import ‘path/to/file.scss’;

WHAT CAN SASS DO MORE? There’s more?!

Loops

@for $i from 1 through 3 {} @each $el in h1, h2, h3, h4 {} $i:0; @while $i < 6 { $i: $i + 1 }

Extend - @extend

.link { color:$link-color; &:hover { color:$lighten($color,10); } } a { @extend .link; }

No more double code Less writing

SASS also auto minifies & checks for errors :nested – default :expanded - normal :compact - every selector on 1 line :compressed - no more whitespaces

Awesome right?

HOW TO INSTALL / USE

Easy as pie!

All you need is ruby

Image source: http://www.sw.it.aoyama.ac.jp/2009/pub/IUC33-ruby1.9/

Mmm pie…. Image source: http://www.motivationals.org/demotivational-posters-1/

demotivational-poster-44122.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

STOP, HAMMER RECAP TIME!

Recap

•  Nesting •  Variables - $ •  Maths & color functions •  Mixins - @mixin •  Import - @import

AND STILL… THERE’S MORE

COMPASS

Compass <3 CSS 3

Image source: http://desandro.com/work/zui-site-riot/html5css3.png

Loads of predefined & tested mixins

Image source: http://compass-style.org

Blueprint grid system built in & ready to use

Image source: http://www.blueprintcss.org/

Extended maths

pi() sin($number) cos($number) tan($number)

Advanced sprite control

STILL NOT CONVINCED?

Check these links!

•  http://sass-lang.com/ •  http://compass-style.org/ •  http://rubyinstaller.org/ (windows needs ruby installer)

•  https://github.com/thesedays/scss-mixins

And these links!

•  http://www.thesedays.com •  http://labs.thesedays.com

THAT’S ABOUT IT…

DEMO PLZ?!