Eps 30: SASS Basics – Talking HTML
Listen now
Description
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
More Episodes
Published 02/20/21
Published 02/20/21