Your SlideShare is downloading. ×
Sass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Sass

981
views

Published on

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

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
981
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SASSSuper awesome stylesheets
  • 2. Who am I?
  • 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. What’s this about? Image source: http://thekingofthevikings.deviantart.com/art/8-Bit- Question-Box-170241434
  • 5. S.A.S.SSyntactically awesome style sheetsSuper awesome style sheetsWhat’s this about? Image source: http://sass-lang.com/
  • 6. What’s wrong with normalstyle sheets? Image source: http://webwox.wordpress.com/2011/08/31/history-of- cascading-style-sheetscss/
  • 7. Nothing really…
  • 8. CSS isawesome! Image source: http://www.zazzle.com/ css_is_awesome_with_scroll_mug-168224268218561554
  • 9. CSS let’s you make pretty thingsImage source: http://www.onlymotivational.com/pictures/ i_feel_pretty.htm
  • 10. Without it, all websiteswould look the same Image source: http://kill.devc.at/node/284
  • 11. But…
  • 12. Developing CSS is slow Image source: http://www.tensionnot.com/pictures/Car/Horse-Cart-Car
  • 13. CSS is repetitiveImage source: http://www.123rf.com/photo_5880238_windows-shaped-like- space-invaders-on-building-canada-tower-london-exterior.html
  • 14. CSSismessy Image source: http://vickybeeching.com/blog/why-are-we-musicians- often-so-messy/messy-office-03/
  • 15. CSS needs external toolsfor optimization
  • 16. CSS isn’t really reusable
  • 17. WHAT CAN SASS DO FOR US?Most important stuff
  • 18. Nesting
  • 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. Variables - $
  • 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. Maths, calculations
  • 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. $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. Mixins - @mixin
  • 26. Reusable ++Readability ++@mixin hover-link($color) { & { color:$color; } &:hover { color:$lighten($color,10); }}a { @include hover-link(#000); }
  • 27. Import - @import
  • 28. Multiple filesCompiled into 1Only uses what you want@import ‘path/to/file.scss’;
  • 29. WHAT CAN SASS DO MORE?There’s more?!
  • 30. @for $i from 1 through 3 {}@each $el in h1, h2, h3, h4 {}$i:0;@while $i < 6 { $i: $i + 1 }Loops
  • 31. .link { color:$link-color; &:hover { color:$lighten($color,10); }}a { @extend .link; }Extend - @extend
  • 32. No more double codeLess writing
  • 33. SASS also auto minifies &checks for errors:nested – default:expanded - normal:compact - every selector on 1 line:compressed - no more whitespaces
  • 34. Awesome right?
  • 35. HOW TO INSTALL / USE
  • 36. All you needis rubyEasy as pie! Image source: http://www.sw.it.aoyama.ac.jp/2009/pub/IUC33-ruby1.9/
  • 37. Mmm pie….Image source: http://www.motivationals.org/demotivational-posters-1/ demotivational-poster-44122.jpg
  • 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. STOP, HAMMER RECAP TIME!
  • 40. •  Nesting•  Variables - $•  Maths & color functions•  Mixins - @mixin•  Import - @importRecap
  • 41. AND STILL… THERE’S MORE
  • 42. COMPASS
  • 43. Compass <3 CSS 3Image source: http://desandro.com/work/zui-site-riot/html5css3.png
  • 44. Loads ofpredefined &tested mixins Image source: http://compass-style.org
  • 45. Blueprint grid systembuilt in & ready to use Image source: http://www.blueprintcss.org/
  • 46. pi()sin($number)cos($number)tan($number)Extended maths
  • 47. Advanced sprite control
  • 48. STILL NOT CONVINCED?
  • 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. •  http://www.thesedays.com•  http://labs.thesedays.comAnd these links!
  • 51. THAT’S ABOUT IT…
  • 52. DEMO PLZ?!