))
Eps 30: SASS Basics – Talking HTML
Archived series ("Redirect loop" status)
When?
This feed was archived on June 01, 2018 14:22 (
Why? Redirect loop status. We detected 2 or more feeds redirecting to each other.
What now? You might be able to find a more up-to-date version using the search function. This series will no longer be checked for updates. If you believe this to be in error, please check if the publisher's feed link below is valid and contact support to request the feed be restored or if you have any other concerns about this.
Manage episode 203442363 series 2239752
Content provided by Tom Norman. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Tom Norman or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://player.fm/legal.
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 - Make. Manage. Achieve..
38 episodes
Share
