Sassive Aggressive: Level Up Your CSS with Sass

2,084 views
1,966 views

Published on

As the line between designer and developer continues to blur, we need more from CSS than it can offer. Sass is an extension of CSS that adds basic features CSS is sorely missing (like variables and nesting). But Sass kicks things to a new level with mixins (flexible, re-usable blocks of CSS) and advanced selector inheritance. Simply put, Sass makes CSS authoring fun again.

Published in: Design, Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,084
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Sassive Aggressive: Level Up Your CSS with Sass

  1. 1. Sassive Aggressive// Level Up Your CSS with Sass@import the-awesome
  2. 2. What is Sass?
  3. 3. What is Sass? Syntactically awesome stylesheets
  4. 4. We all use CSS sucks
  5. 5. butWe all use CSS sucks
  6. 6. butWe all use CSS sucks Especially if you’ve used Sass.
  7. 7. Sass takes everythingthat’s missing from CSS and puts it into CSS.
  8. 8. Sass takes everythingthat’s missing from CSS and puts it into CSS.
  9. 9. Things like…h1 { color: #000; font: 16px/1.6 Georgia; margin: 0;}
  10. 10. Variablesh1 { color: $logo-color; font: 16px/1.6 Georgia; margin: 0;}
  11. 11. Nestingh1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; }}
  12. 12. The Ampersandh1 { color: #000; font: 16px/1.6 Georgia; margin: 0; &.new { color: red; }}
  13. 13. Selector Inheritanceh1 { color: #000; font: 16px/1.6 Georgia; margin: 0;}h2 { @extend h1; font-size: 14px;}
  14. 14. Calculationsh1 { color: #000; font: 16px/1.6 Georgia; margin: $default_margin * 2;}
  15. 15. Color Manipulationh1 { color: lighten(#000, 25%); font: 16px/1.6 Georgia; margin: 0;}
  16. 16. Mixinsh1 { color: #000; font: 16px/1.6 Georgia; margin: 0; @include border-radius(4px);}
  17. 17. And so, so much more.
  18. 18. Sass does not replace CSS.
  19. 19. Sass does not replace CSS. Sass makes CSS.
  20. 20. Sass does not replace CSS. Sass makes CSS. better.
  21. 21. Three more things before we play…
  22. 22. 1 What’s ? http://compass-style.org • a framework that uses Sass • an open source project • a collection of reusable design patterns that makes using the latest CSS features super easy Compass is not Sass, but they are oen grouped together.
  23. 23. 2 Two Syntaxes SCSS
  24. 24. 2 Two Syntaxes SCSS h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; } }
  25. 25. 2 Two Syntaxes SCSS booooooo h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; } }
  26. 26. 2 Two Syntaxes SCSS booooooo h1 { of the color: #000; ’s op inion ER: A dam esent Joel’s S CLAIM 16px/1.6 pr font: ot re Georgia; .DI ta x do n yntax SCS S margin:f the SCSS s syn 0; opin{ a ion o display: block; width: 100px; height: 50px; } }
  27. 27. 2 Two Syntaxes Sass h1 color: #000 font: 16px/1.6 Georgia margin: 0 a display: block width: 100px height: 50px
  28. 28. 2 Two Syntaxes Sass yaaaaaay h1 color: #000 font: 16px/1.6 Georgia margin: 0 a display: block width: 100px height: 50px
  29. 29. 3 The Command Line Don’t be afraid.
  30. 30. Let’s look at some code!
  31. 31. itche d to a point , we sw th Sass/ TE: A t this tratio n (wiNO demo ns to-up dating liv e code e left and au on th n the r ight). SCSS iled C SS o comp
  32. 32. See the code: https://github.com/jayroh/sass-harvard Note that the code samples are stored within the same file, but on different branches. Here are the direct links to each branch:Ampersand (Sass/SCSS) Mixins (Sass/SCSS)Calculations (Sass/SCSS) Nesting (Sass/SCSS) Colors (Sass/SCSS) Partials (Sass/SCSS) Compass (Sass/SCSS) Responsive (Sass/SCSS) Extend (Sass/SCSS) Sprites (Sass/SCSS) Loops (Sass/SCSS) Variables (Sass/SCSS)
  33. 33. Who are these guys?Joel Oliveira Adam Darowski e47th PatientsLikeMe @jayroh @adarowski

×