Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How SASS makes your life 1000% easier

921b21db0adbe6810cae63e616777d4a?s=47 thebeckyhamm
March 18, 2014

How SASS makes your life 1000% easier

Introduction to SASS. Covers installing the appropriate applications and the basics of variables and mixins.

CSS Preprocessor Applications:




March 18, 2014

More Decks by thebeckyhamm

Other Decks in Design


  1. How SASS Can Make Your Life 1000% Easier

  2. • What are CSS preprocessors? • How do we install

    them? • Digging into variables and mixins
  3. What are CSS Preprocessors ?

  4. CSS preprocessors take care of mundane tasks for you •

    They do grunt work for you! • By definition, they take a file (LESS or SASS), and process it into CSS • You then use the CSS it made in the <head> of your website as usual (using the LESS or SASS file in the <head> won’t work!)
  5. 2 Common Preprocessors: • SASS (Syntactically Awesome Style Sheets) •

    LESS (Leaner CSS)
  6. Both are fine. • SASS does more stuff (generally). •

    LESS works on Windows very easily (SASS is built in Ruby, which by default isn’t installed on Windows)
  7. How do we install them?

  8. Applications that process SASS or LESS for you • Codekit

    ($29) • PrePros (free to $24) • Grunt (free)
  9. Windows: • Install PrePros Mac: • Install Codekit or •

    Install PrePros
  10. Add your project to Codekit / PrePros [Demo]

  11. Digging In (from here on out we’re just using SASS)

  12. The Basics 1. Create a stylesheet and save as ________.scss

    2. Start writing SASS and/or CSS in your .scss file (CSS is always valid in a .scss file) 3. Save the file. Codekit / PrePros will compile it for you as “_________.css” 4. Uses the .css in your <head> as usual!
  13. What are variables and mixins? They are reusable pieces of

    code (so you type less and smile more)
  14. Variables $padding:  1em;   $pink:  #f0f;   $header-­‐color:  $pink;  

    $green:  #85C3AF; $ denotes a variable Name it whatever you want Add whatever value you want it to hold: colors, padding, other variables, etc.
  15. Variables (example) .header  {          background-­‐color:  $header-­‐color;

             display:  block;          margin:  1em;          padding:  $padding;   }   .section  {          color:  $green;          padding:  $padding;   } This is the same as if you wrote…
  16. Variables (example) .header  {          background-­‐color:  #f0f;

             display:  block;          margin:  1em;          padding:  1em;   }   .section  {          color:  #85C3AF;          padding:  1em;   }
  17. Mixins @mixin  transition($item)  {          -­‐moz-­‐transition:  $item

     .2s  ease-­‐in-­‐out;          -­‐webkit-­‐transition:  $item  .2s  ease-­‐in-­‐out;          transition:  $item  .2s  ease-­‐in-­‐out;         }   @mixin  transparent-­‐bg($color)  {          background-­‐color:  $color;          background-­‐color:  rgba($color,  .7);       } Call @mixin first Name it whatever you want Tell it the variable you’re going to set Put that variable wherever you need it repeated in your CSS
  18. Mixins (example) .alert-­‐box  {          color:  white;

             @include  transparent-­‐bg($green);          @include  transition(color);     }   .alert-­‐box:hover  {          color:  black;   } This is the same as if you wrote… To use a mixin in your SCSS, call it using @include Put the item that you need to use in the parentheses. Can be a variable or regular text
  19. Mixins (example) .alert-­‐box  {          color:  white;

             background-­‐color:  #85C3AF;          background-­‐color:  rgba(133,  195,  175,  .7);          -­‐moz-­‐transition:  color  .2s  ease-­‐in-­‐out;          -­‐webkit-­‐transition:  color  .2s  ease-­‐in-­‐out;          transition:  color  .2s  ease-­‐in-­‐out;       }   .alert-­‐box:hover  {          color:  black;   }
  20. Resources • Lynda Tutorials • Official Beginner's Guide • More

    beginner tutorials from The Sass Way