Preprocessor CSS: SASS

762 views

Published on

Some slides to talk about Preprocessors CSS, SASS in details

Published in: Internet, Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
762
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Preprocessor CSS: SASS

  1. 1. PREPROCESSORS CSS //How to improve your workflow @import improve-css @oeg87
  2. 2. 16.04.2012 2nd Meeting FrontEnders Ticino www.frontenders.ch
  3. 3. Web designer @oeg87 3
  4. 4. CSS is good … @oeg87 4
  5. 5. Preprocessor are better @oeg87 5
  6. 6. Everybody use CSS @oeg87 6
  7. 7. Everybody use CSS is limited But @oeg87 7
  8. 8. Everybody use CSS is limited If you have used a preprocessor But @oeg87 8
  9. 9. Some preprocessors http://www.catswhocode.com/blog/8-css-preprocessors-to-speed-up-development-time@oeg87 9
  10. 10. What is “SASS”? Syntactically Awesome StyleSheets @oeg87 10
  11. 11. Few words to describe SASS • Variables • Mixins • Selector inheritance • Calculations • Functions • Conditionals • Loops @oeg87 11
  12. 12. Install and use gem install sass sass --watch file.scss:file.css @oeg87 12
  13. 13. SASS Takes everything that’s missing from css @oeg87 13
  14. 14. SASS Takes everything that’s missing from css and puts it into CSS @oeg87 14
  15. 15. SASS Takes everything that’s missing from css and puts it into CSS “SASS is as powerful as you want it to be” @oeg87 15
  16. 16. Thinking that … .class { color: #ffdd00; font: 16/1.4 Arial; margin: 0; } @oeg87 16
  17. 17. How many people have used that? @oeg87 17
  18. 18. Variables SASS $brand-color: #ffdd00; .class { color: $brand-color; font: 16/1.4 Arial; margin: 0; } CSS .class { color: #ffdd00; font: 16/1.4 Arial; margin: 0; } @oeg87 18
  19. 19. Nesting SASS .class { color: #ffdd00; font: 16/1.4 Arial; margin: 0; a { display: block; width: 100px; height: 50px; } } CSS .class { color: #ffdd00; font: 16/1.4 Arial; margin: 0; } .class a { display: block; width: 100px; height: 50px; } @oeg87 19
  20. 20. The Ampersand SASS .class { color: $brand-color; font: 16/1.4 Arial; margin: 0; &.new-class { color: $sub-color; } } CSS .class { color: #ffdd00; font: 16/1.4 Arial; margin: 0; } .class.new-class { color: #000; } @oeg87 20
  21. 21. Selector Inheritance SASS .class { color: $brand-color; font: 16/1.4 Arial; margin: 0; } .new-class { @extend .class; padding: 10px; } CSS .class, .new-class { color: $brand-color; font: 16/1.4 Arial; margin: 0; } .new-class { padding:10px; } @oeg87 21
  22. 22. Calculations SASS $grid-margin: 10px; .class { color: $brand-color; font: 16/1.4 Arial; margin: $grid-margin * 2; } CSS .class { color: $brand-color; font: 16/1.4 Arial; margin: 20px; } @oeg87 22
  23. 23. Color Manipulation SASS .class { color: darken(#fd0,30%); font: 16/1.4 Arial; margin: 0; } CSS .class { color: #665800; font: 16/1.4 Arial; margin: 0; } @oeg87 23
  24. 24. Mixins @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -khtml-border-radius: $radius; border-radius: $radius; } .class { color: #ffdd00; font: 16/1.4 Arial; margin: 0; @include border-radius(4px); } @oeg87 24
  25. 25. Cycles SASS $list: #000, #999, #ccc; @for $i from 1 through length($list){ .class-#{$i} { color: nth($list, $i); } } CSS .class-1 { color: #000; } .class-2 { color: #999; } .class-3 { color: #ccc; } @oeg87 25
  26. 26. And a lot more @oeg87 26
  27. 27. Preprocessor does not replace a css… @oeg87 27
  28. 28. Preprocessor does not replace a css… the preprocessors makes css better @oeg87 28
  29. 29. To know More things @oeg87 29
  30. 30. compass SASS living without compass, but compass does not living without SASS @oeg87 30
  31. 31. • A framework/extensions of CSS3 that uses Sass • Open-source project • A collection of patterns, rules, variables, mixins, and more @oeg87 31
  32. 32. Two syntaxes SASS e SCSS @oeg87 32
  33. 33. SCSS .class { color: $brand-color; font: 16/1.4 Arial; margin: 0; .new-class { @extend class; margin: 10px; } } SASS .class color: $brand-color font: 16/1.4 Arial margin: 0 .new-class @extend class margin: 10px @oeg87 33
  34. 34. The compression types @oeg87 34
  35. 35. //Compact .wrap{ /*comment*/ margin:0 auto; } .wrap .inside {width:500px; margin:0 auto} //Compressed .wrap{margin:0 auto}.wrap .inside{width:500px;margin:0 auto} //Expanded .wrap { /*comment*/ margin:0 auto; } .wrap .inside { width:500px; margin:0 auto } sass --watch --style compact file.scss:file.css @oeg87 35
  36. 36. Positive aspects //Obviously, there are @oeg87 36
  37. 37. + • Save time • @import • Help to reduce HTTP request • DRY principle (Don’t Repeat Yourself) • Re-use • Easy learning curve • // comments @oeg87 37
  38. 38. Negative aspects //Yes, we found negative aspects here, too @oeg87 38
  39. 39. – • Losing semplicity concepts of CSS • Need to have Ruby • You want not go back to traditional CSS • Documentation isn’t always clear (SASS), LESS is better in this way @oeg87 39
  40. 40. Let’s code <code> <code> <code> @oeg87 40 http://codepen.io/Geo87/pen/EJvrb
  41. 41. “They can be a great people, $Kal-El, they wish to be. They only lack the light to show the way. For this reason above all, their capacity for good, I have sent them you… my only $son” Jor-El $son: preprocessor; $Kal-El: SASS; @oeg87 41
  42. 42. @if $questions == $true { //please ask } @oeg87 42
  43. 43. { Thank you } //and … @oeg87 43
  44. 44. Bibliography • http://www.comicvine.com/forums/battles-7/who-can-beat- superman-744764 • http://www.imdb.com/title/tt0348150 • http://www.slideshare.net/adarowski/sassive-aggressive-using-sass- to-make-your-life-easier-7366267 @oeg87 44

×