Eps 30: SASS Basics - Talking HTML ⋆ Schaffen Creative

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