sass
Post on 13-Dec-2014
952 Views
Preview:
DESCRIPTION
TRANSCRIPT
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?!
top related