podcast Archives ⋆ Schaffen Creative

Eps 30: SASS Basics – Talking HTML

Listen Later
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.

                    ...more
                    View all episodesView all episodes
                    Download on the App Store
                    podcast Archives ⋆ Schaffen CreativeBy Tom Norman