Eps 30: SASS Basics – Talking HTML
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