Sassive Aggressive// Level Up Your CSS with Sass@import the-awesome
What is Sass?
What is Sass?       Syntactically       awesome       stylesheets
We all use CSS sucks
butWe all use CSS sucks
butWe all use CSS sucks  Especially if you’ve used Sass.
Sass takes everythingthat’s missing from CSS  and puts it into CSS.
Sass takes everythingthat’s missing from CSS  and puts it into CSS.
Things like…h1 {  color: #000;  font: 16px/1.6 Georgia;  margin: 0;}
Variablesh1 {  color: $logo-color;  font: 16px/1.6 Georgia;  margin: 0;}
Nestingh1 {  color: #000;  font: 16px/1.6 Georgia;  margin: 0;  a {    display: block;    width: 100px;    height: 50px;  }}
The Ampersandh1 {  color: #000;  font: 16px/1.6 Georgia;  margin: 0;  &.new {    color: red;  }}
Selector Inheritanceh1 {  color: #000;  font: 16px/1.6 Georgia;  margin: 0;}h2 {  @extend h1;  font-size: 14px;}
Calculationsh1 {  color: #000;  font: 16px/1.6 Georgia;  margin: $default_margin * 2;}
Color Manipulationh1 {  color: lighten(#000, 25%);  font: 16px/1.6 Georgia;  margin: 0;}
Mixinsh1 {  color: #000;  font: 16px/1.6 Georgia;  margin: 0;  @include border-radius(4px);}
And so, so much more.
Sass does not replace CSS.
Sass does not replace CSS.    Sass makes CSS.
Sass does not replace CSS.    Sass makes CSS.          better.
Three more things before we play…
1   What’s                                           ?                http://compass-style.org    • a framework that uses ...
2   Two Syntaxes        SCSS
2   Two Syntaxes             SCSS    h1 {      color: #000;      font: 16px/1.6 Georgia;      margin: 0;      a {         ...
2   Two Syntaxes             SCSS    booooooo    h1 {      color: #000;      font: 16px/1.6 Georgia;      margin: 0;      ...
2   Two Syntaxes                SCSS       booooooo      h1 {                         of the        color: #000; ’s op   i...
2   Two Syntaxes             Sass    h1      color: #000      font: 16px/1.6 Georgia      margin: 0      a        display:...
2   Two Syntaxes             Sass    yaaaaaay    h1      color: #000      font: 16px/1.6 Georgia      margin: 0      a    ...
3   The Command Line        Don’t be afraid.
Let’s look at some code!
itche d to a                  point  , we sw th Sass/    TE: A  t this      tratio n (wiNO            demo  ns          to...
See the code:       https://github.com/jayroh/sass-harvard    Note that the code samples are stored within the same file, ...
Who are these guys?Joel Oliveira   Adam Darowski    e47th         PatientsLikeMe   @jayroh         @adarowski
Upcoming SlideShare
Loading in...5
×

Sassive Aggressive: Level Up Your CSS with Sass

1,790

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
1,790
On Slideshare
0
From Embeds
0
Number of Embeds
1
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×