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:
https://incident57.com/codekit
http://alphapixels.com/prepros/

Tutorials:
http://www.lynda.com/SASS-training-tutorials/1435-0.html
http://sass-lang.com/guide
http://thesassway.com/beginner

921b21db0adbe6810cae63e616777d4a?s=128

thebeckyhamm

March 18, 2014
Tweet

Transcript

  1. 2.

    • What are CSS preprocessors? • How do we install

    them? • Digging into variables and mixins
  2. 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!)
  3. 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)
  4. 8.

    Applications that process SASS or LESS for you • Codekit

    ($29) • PrePros (free to $24) • Grunt (free)
  5. 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!
  6. 13.

    What are variables and mixins? They are reusable pieces of

    code (so you type less and smile more)
  7. 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.
  8. 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…
  9. 16.

    Variables (example) .header  {          background-­‐color:  #f0f;

             display:  block;          margin:  1em;          padding:  1em;   }   .section  {          color:  #85C3AF;          padding:  1em;   }
  10. 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
  11. 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
  12. 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;   }