Introduction to Sass/SCSS

Gist of Verbose Lesson Plan

Goals:

  1. Get a general understanding of Sass and SCSS
  2. Discover Sass Ninja Skills
    • Variables
    • Nesting
    • Color Functions
    • Math Functions

Sass: Syntactically Awesome Style Sheets

Interesting Note: Sass is never in uppercase.
SCSS is always uppercase.
There's even a website about it:
SassnotSASS.com

Sass is a preprocessor.

Old School Sass

      !primary-color= hotpink

      .my-css-class
          color= !primary-color
          width= 100%
          overflow= hidden
    
This was weird.

SCSS: Sassy CSS

Seriously.

Modern SCSS

      $primary-color: hotpink;

      .my-element {
          color: $primary-color;
          width: 100%;
          overflow: hidden;
      }
    

You can still use Sass if you want to.

Why use a CSS preprocessor?

  • Developers are lazy.
  • DRY Code

Cool New Tricks

  • Variables
  • Nesting
  • Math
  • Color Functions
  • OTHER Functions (like for loops!)
  • MixIns

Variables

      $ridiculousPink: #e91d63;

      body {
        background-color: $ridiculousPink;
      }
    
      $frilly-font: "Fantasy", cursive;
      $main-font: "Arial", "Helvetica", "Copperplate", sans-serif;
      $button-slide-transition: width 2s, height 2s, background-color 2s, transform 2s;

      .main-title { font-family: $frilly-font; }
      .main-content {
        font-family: $main-font;
        button {
          transition: $button-slide-transition;
        }
      }
    
ProTip: Consolodate variables into one file.
variables.scss
      // Colors
      $favorite-text-color: chartreuse;
      $gray-link: #aaa;

      // Fonts
      $frilly-font: "Fantasy", cursive;
      $main-font: "Arial", "Helvetica", "Copperplate", sans-serif;

      // Transitions
      $button-slide-transition: width 2s, height 2s, background-color 2s, transform 2s;
    
home-page.scss
      @import "variables";

      body {
        color: $favorite-text-color;
      }
    

Your Turn

Turn this CSS into SCSS using variables.

See the Pen Lkaqzo by Brenna Martenson (@bmartenson) on CodePen.

A quick note on Sass variable naming conventions.

Nesting

Nesting allows you to structure your CSS similarly to how the associated HTML is structured.

See the Pen Nesting Example by Brenna Martenson (@bmartenson) on CodePen.

IMPORTANT

Nesting can result in VERY specific CSS.
Don't go overboard.

Nesting & Psuedo Selectors

A good practice for nesting is when you have a psuedo selector like the following:

:hover

      a {
        &:hover { color: pink; }
      }
    

Your Turn

Write SCSS for this HTML using nesting & variables to accomplish the following criteria:

  1. Define all styles as variables.
  2. Link text font family should be Arial, Tahoma, or sans-serif.
  3. On hover, make the link text red, and the button text white.
  4. On hover, make the button have a box shadow of your choosing.

See the Pen Nested SCSS by Brenna Martenson (@bmartenson) on CodePen.

Color Functions

Color Functions

Lets you adjust color values with minimal headache.

  • complement(color)
  • mix(color, %)
  • lighten/darken(color, %)
  • saturate/desaturate(color, %)

Quick CSS Color Review

RGBA

rgba(0-255, 0-255, 0-255, 0-1)
or
rgba(0-100%, 0-100%, 0-100%, 0-1 )

Hexadecimal

#rrggbb or #rgb

ProTip: #f00 = #ff0000. Simply duplicate each character.

(FF is 255 if converted from base 16 (Hexadecimal) to base 10 (Decimal).)

HSLA

hsla(0-360, 0-100%, 0-100%, 0-1)

Let's see some functions

complement(color)

Returns the color that is 180 degrees from the given argument on the RGBA color wheel.

      $color: hsla(240, 100%, 50%, 1);
      complement(hsla(240, 100%, 50%, 1)); => hsla(60, 100%, 50%, 1);

      .complement-background {
        background-color: complement($color)
      }
    

See the Pen Color Functions by Brenna Martenson (@bmartenson) on CodePen.

mix(color1, color2, %)

Mixes two given colors based on the percentage.

It's like a spectrum.
100% means completely on the color1 side, 0% is completely towards color2.

      $red: hsla(0, 100%, 50%, 1);
      $blue: hsla(240, 100%, 50%, 1);

      p {
        background-color: mix($red, $blue, 80%);
      }
    

See the Pen Color Functions by Brenna Martenson (@bmartenson) on CodePen.

Your Turn

Experiment with using the mix() and complement() functions in the CodePen from the previous slide.

Then implement the lighten(), darken(), saturate(), and desaturate() functions.
Check out the documentation.

Math

(insert stink eye here)

Sass lets you call math operators on numerical values as if you were using a robust programming language (crazy!!).

Example:

      // SCSS
      $content-width: 900px;

      .innerContent {
        width: $content-width/3
      }
    
      // CSS
      .innerContent{
        width: 300px;
      }
    

This is helpful for organizing what you are trying to calculate on a page.

See the Pen Math Functions by Brenna Martenson (@bmartenson) on CodePen.

Your Turn!

Random Color Generator

Using the random number function, assign a random background color to the div to the CodePen from the previous slide.
Be sure to use variables.

Hint: Remember that RGB values are created by setting 3 values of numbers between 0-255.

The End.

Gist of Verbose Lesson Plan puking-rainbows