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

The post Eps 30: SASS Basics – Talking HTML appeared first on Schaffen Creative.