Downloaded 22 times
Uploaded byGeoffroy Baylaender
Preprocessor CSS: SASS
The document discusses CSS preprocessors, particularly Sass, emphasizing its advantages over traditional CSS, such as variables, nesting, and mixins. It outlines how Sass enhances workflow and code efficiency, while also mentioning potential downsides like complexity and dependency on Ruby. Overall, it argues that preprocessors significantly improve CSS development.
Preprocessor CSS: SASS
- 1. PREPROCESSORS CSS //How toimprove your workflow @import improve-css @oeg87
- 2.
- 3.
- 4. CSS is good… @oeg87 4
- 5.
- 6.
- 7. Everybody use CSSis limited But @oeg87 7
- 8. Everybody use CSSis limited If you have used a preprocessor But @oeg87 8
- 9.
- 10. What is “SASS”? SyntacticallyAwesome StyleSheets @oeg87 10
- 11. Few words todescribe SASS • Variables • Mixins • Selector inheritance • Calculations • Functions • Conditionals • Loops @oeg87 11
- 12. Install and use geminstall sass sass --watch file.scss:file.css @oeg87 12
- 13. SASS Takes everythingthat’s missing from css @oeg87 13
- 14. SASS Takes everythingthat’s missing from css and puts it into CSS @oeg87 14
- 15. SASS Takes everythingthat’s missing from css and puts it into CSS “SASS is as powerful as you want it to be” @oeg87 15
- 16. Thinking that … .class{ color: #ffdd00; font: 16/1.4 Arial; margin: 0; } @oeg87 16
- 17. How many peoplehave used that? @oeg87 17
- 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. 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. 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. 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. 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. 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. 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. 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. And a lotmore @oeg87 26
- 27. Preprocessor does notreplace a css… @oeg87 27
- 28. Preprocessor does notreplace a css… the preprocessors makes css better @oeg87 28
- 29.
- 30. compass SASS living withoutcompass, but compass does not living without SASS @oeg87 30
- 31. • A framework/extensionsof CSS3 that uses Sass • Open-source project • A collection of patterns, rules, variables, mixins, and more @oeg87 31
- 32. Two syntaxes SASS eSCSS @oeg87 32
- 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.
- 35. //Compact .wrap{ /*comment*/ margin:0auto; } .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. Positive aspects //Obviously, thereare @oeg87 36
- 37. + • Save time •@import • Help to reduce HTTP request • DRY principle (Don’t Repeat Yourself) • Re-use • Easy learning curve • // comments @oeg87 37
- 38. Negative aspects //Yes, wefound negative aspects here, too @oeg87 38
- 39. – • Losing semplicityconcepts 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. Let’s code <code> <code><code> @oeg87 40 http://codepen.io/Geo87/pen/EJvrb
- 41. “They can bea 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. @if $questions ==$true { //please ask } @oeg87 42
- 43. { Thank you} //and … @oeg87 43
- 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