Sassive Aggressive: Level Up Your CSS with Sass

  • 1,689 views
Uploaded 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 …

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.

More in: Design , Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,689
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
21
Comments
0
Likes
1

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. Sassive Aggressive// Level Up Your CSS with Sass@import the-awesome
  • 2. What is Sass?
  • 3. What is Sass? Syntactically awesome stylesheets
  • 4. We all use CSS sucks
  • 5. butWe all use CSS sucks
  • 6. butWe all use CSS sucks Especially if you’ve used Sass.
  • 7. Sass takes everythingthat’s missing from CSS and puts it into CSS.
  • 8. Sass takes everythingthat’s missing from CSS and puts it into CSS.
  • 9. Things like…h1 { color: #000; font: 16px/1.6 Georgia; margin: 0;}
  • 10. Variablesh1 { color: $logo-color; font: 16px/1.6 Georgia; margin: 0;}
  • 11. Nestingh1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; }}
  • 12. The Ampersandh1 { color: #000; font: 16px/1.6 Georgia; margin: 0; &.new { color: red; }}
  • 13. Selector Inheritanceh1 { color: #000; font: 16px/1.6 Georgia; margin: 0;}h2 { @extend h1; font-size: 14px;}
  • 14. Calculationsh1 { color: #000; font: 16px/1.6 Georgia; margin: $default_margin * 2;}
  • 15. Color Manipulationh1 { color: lighten(#000, 25%); font: 16px/1.6 Georgia; margin: 0;}
  • 16. Mixinsh1 { color: #000; font: 16px/1.6 Georgia; margin: 0; @include border-radius(4px);}
  • 17. And so, so much more.
  • 18. Sass does not replace CSS.
  • 19. Sass does not replace CSS. Sass makes CSS.
  • 20. Sass does not replace CSS. Sass makes CSS. better.
  • 21. Three more things before we play…
  • 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. 2 Two Syntaxes SCSS
  • 24. 2 Two Syntaxes SCSS h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; } }
  • 25. 2 Two Syntaxes SCSS booooooo h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; } }
  • 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. 2 Two Syntaxes Sass h1 color: #000 font: 16px/1.6 Georgia margin: 0 a display: block width: 100px height: 50px
  • 28. 2 Two Syntaxes Sass yaaaaaay h1 color: #000 font: 16px/1.6 Georgia margin: 0 a display: block width: 100px height: 50px
  • 29. 3 The Command Line Don’t be afraid.
  • 30. Let’s look at some code!
  • 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. 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. Who are these guys?Joel Oliveira Adam Darowski e47th PatientsLikeMe @jayroh @adarowski