Eps 30: SASS Basics

What is SASS?

Considered an extension of CSS. I consider it a streamlined version of CSS.

How it works

  • Set up on your personal system – I use Koala to compile my code
    • Done locally then uploaded to the server via Filezilla
  • Create a .SCSS file
  • Write ANY CSS code as you normally would
  • Add the SASS styling code as you see fit
    • variables
    • mixins
    • Code Nesting
      • Putting code inside of code
    • imports
      • Get into it in a future eps
  • Save file
  • Compile code
    • may do so automatically once SCSS file is saved.
    • Compiling transforms your SCSS file into a CSS file

Benefits

  • Streamline CSS writing – The one change will be distributed accross to all the corresponding instances of whatever it is you changed.

Negatives

  • You have to learn how to use SASS
  • You have to figure out how to get it to work on your computer, which can be a feat if you aren’t Computer savvy

Variables

  • Not usable in standard CSS
  • SASS integrates a way to create variables which then translates to regular CSS when compiled


$primary-color: #113e6d; /* BREWER BLUE */
$secondary-color: #c1c4c4; /* COWBOY GRAY */
$tertiary-color: #ffbf00; /* PACKER GOLD */
$quaternary-color: #294239; /* PACKER GREEN */
$quinary-color: #b70101; /* BADGER RED */
$font-stack1: 'Merienda One', cursive;
$font-stack2: 'Kite One', sans-serif;
$font-stack3: 'Sintony', sans-serif;

body {
background-color: $primary-color;
font-family: $font-stack3;
font-size: 62.5%;
}

#center {
margin: 0 auto;
background-color: $secondary-color;
width: 800px;
}

Compiling program & link (Koala)

Where to learn about SASS – http://sass-lang.com/

Codeacademy has a class

@tommnorman

@tnpwdesign

TNPWDesign.com

WebDevPod.com