Your SlideShare is downloading. ×
Sassive Aggressive: Level Up Your CSS with Sass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Sassive Aggressive: Level Up Your CSS with Sass

1,733
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 …

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,733
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
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

×