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
Podcast: Play in new window | Download (Duration: 19:07 — 17.5MB)
Subscribe: Apple Podcasts | Android | Email | RSS
Recent Comments