Sass

1,313 views

Published on

This is a brief presentation about SASS and Compass, and their basic functionality.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,313
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
40
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Sass

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

×