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 The post Eps 30: SASS Basics – Talking HTML appeared first on Schaffen Creative.