Why SASS?

SASS is an improvement on CSS in that there are methods of abstraction. It is a stylesheet language that is compiled into CSS, which means that Sass will translate the Sass code you wrote into CSS, which is what your web browser can read.

SASS vs SCSS

As you learn about Sass, you might notice something called Scss. They are basically the same thing except that Scss uses curly braces and semicolons to distinguish between lines. Sass uses indentation and newlines instead.

We will be teaching the Scss syntax because it is more commonly used.

Getting started

A easy way to write SASS and have it preprocessed into CSS is by using a Jekyll powered website, such as GitHub pages or Fastpages.

The first step is to clone a GitHub pages repo, such as this one.

Within the repository, head over to assets/css/, and open style.scss.

This is where you can create your SASS code.

To see your CSS-translated SASS code, head over to _site/assets/css/style.css

Note: You will need to run bundle exec jekyll serve before the _site directory appears.

The first few hundred lines are used to style Github's theme. Make sure to scroll to the very bottom to see the SASS code that you wrote, which is in the form of CSS.

Nesting

Sass nesting decreases repetition by allowing related CSS instructions. Instead of this...

.font .title { 
    font-family: "Times New Roman", serif;
    font-size: 3em;
}

.font .text {
    font-family: "Times New Roman", serif; 
    font-size: 1em;
}

...you could define text font settings like this:

.font {
    .title {
    font-family: "Times New Roman", serif;
    font-size: 3em;
    }

    .text {
    font-family: "Times New Roman", serif;
    font-size: 1em;
    } 
}

These respective classes can be used to affect text settings in, for example divs, like they use on their lesson site.

Mini-hack

Write out the SASS equivalent for the following CSS code:

.a .b {
    color: green;
}

.a .c {
    color: blue;
}

You can nest it within the a class:

.a {
    .b {
        color: green;
    }

    .c {
        color: blue;
    }
}

Extend/Inheritance

What are some similarities that the buttons share? What are the differences?

The text in the buttons have the same font, size, and color. The gradients appear to have similar fading, but different colors. They react the same to being hovered over, but send to different links.

Inheritance can be used to share the same traits.

%buttonLayout {

    width: 15em;

    height: 15em;

    color: #ffffff;

    margin-right: 10%;

}

Each button is given the same traits below:

.gettingStartedButton, .nestingButton, .extendButton {

    @extend %buttonLayout;

}

NOTICE @extend

They can then have their own colors by setting them here:

.gettingStartedButton {

    background: radial-gradient( #1539db, #8a8ce6);

}

.nestingButton {

    background: radial-gradient( #3a9fa7, #8ae0e6);

}

.extendButton {

    background: radial-gradient( #643aa7, #d78ae6);

}

Mixin

(The lesson was moving too fast so I copied these instructions directly from the notes.)

A mixin is similar to extend in that it creates a code template that can be reused. It can also take in parameters so that you can create dynamic styling.

In the example of the buttons, all three buttons have a gradient background. However, the background colors are different.

With SASS, we can create a @mixin at rule that takes in two colors as the parameter:

@mixin buttonLayout($innerColor, $outerColor) {
    background: radial-gradient($innerColor, $outerColor);
}

So, for the buttons, you could also represent the gradient as this:

.gettingStartedButton {
    @include buttonLayout(#1539db, #8a8ce6);
}

Mini-hack

Write out a mixin in SASS that takes in a color and a font size as the parameter. Within the mixin, set the background color and font color to the color parameter, and set the font size to the font size parameter. Then create a selector that calls the mixin, and pass in a color and font size of your choice as the arguments.

@mixin colored($bgColor, $textColor, $fontSize) {
    background-color: $bgColor;
    color: $textColor;
    font-size: $fontSize;
}

.divColor {
    @include colored(#000000, #FFFFFF, 30px);
}

Function

Functions in sass look like this:

@function name(parameters) {
    //code
    @return value;
}

An example with working code can be seen below. It is used for dark vs. light mode:

@function sassInvert($r, $g, $b) {
    $newColor: rgb(255 - $r, 255 - $g, 255 - $b);
    @return $newColor;
}

A selector for the example sassInvert function is seen below.

.invert {
    background-color: sassInvert(0, 0, 0);
    color: sassInvert(211,202,202);
}

Import

Sass code requires lots of code, so it's important to split the code between files and import it later for organization.

The lesson provides this example of use:

"For instance, to put the styling for function.html in another SASS file, first create a directory called _sass.

Within the directory, create another SASS file. In this case, the file is called functionStyle.scss.

Write your SASS code in that file. Once you are finished, switch back to style.scss and import the file with @import "file-name".

For instance, to import the functionStyle.scss file into style.scss, the import statement would be @import "functionStyle"."

SASS Hacks

  1. Take notes and complete the mini-hacks. (0.9)

I did that above.

  1. Complete the quiz questions and provide your answers in this notebook. (0.9)

What is SASS?

  • a. A type of operating system used by many devices
  • b. A scripting language that has many styling operations
  • c. The name of a commonly used computer networking system
  • d. A debugging system with many features

What is the difference between SASS and SCSS?

  • a. They are very similar in their function, but their syntax is slightly different
  • b. They are the exact same, but SASS is more commonly used
  • c. SASS was developed by a larger company

What is an example of an advantage of using SASS over just CSS?

  • a. SASS has more functions than CSS
  • b. SASS is not as expensive to use than CSS
  • c. CSS takes up more bytes
  • d. CSS is not as commonly used, so it’s hard to find solutions to problems that arise while coding in it.

What does SASS stand for?

  • a. Systematically Arranged Sample Sheets
  • b. Syntactically Awesome Style Sheets

Which of the following is NOT an example of an available SASS directive?

  • a. warn
  • b. debug
  • c. import
  • d. compute

The __ directive is used to share rules and relationships between selectors.

  • a. each
  • b. extend
  • c. mixin
  • d. error

What is “@___” called?

  • a. Enhancement
  • b. Directive
  • c. Label
  • d. Token
  1. Use SASS to create something that uses either extend or mixin. (0.9)
@mixin cardSettings($bgColor1, $bgColor2, $borderColor) {
    background: radial-gradient($bgColor1, $bgColor2);
    border: 5px solid $borderColor;
}

%bigCard {
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    height: 600px;
    width: 400px;
}

.redCard {
    @include cardSettings(#CB0000, #FF2323, #710000);
    @extend %bigCard;
}

.blueCard {
    @include cardSettings(#0069A3, #00A4FF, #003654);
    @extend %bigCard;
}

.greenCard {
    @include cardSettings(#009C0E, #00EE15, #004D07);
    @extend %bigCard;
}
Red Card
Blue Card
Green Card
  1. Extra credit: Research other SASS features and blog about what you learned or add to your SASS project with any extra features not covered in this lesson. More points will be given if both are done.

Here are some extra directives that weren't mentioned in the lesson:

  • @if, @else if and @else directives exist for conditionals in SASS. I left an example below:
p {
  @if $test < 3 {
        text-color: red;
    } @else if $test == 3 {
        text-color: blue;
    } @else {
        text-color: white;
    }
}
  • There are also loop directives like @while and @for. See them below:
@while $p < 5 {
    .item-#{$p} {
        color: red;
        $p : $p + 1;
    }
}

@for $i from 1 through 5 {
   .list-#{$i} {
      width: 2px * $i;
   }
}
  • One example of the @for directive being helpful is the code below:
.list-1 {
  margin-left: 2px; 
}

.list-2 {
  margin-left: 4px; 
}

.list-3 {
  margin-left: 6px; 
}

.list-4 {
  margin-left: 8px; 
}

.list-5 {
  margin-left: 10px; 
}

vs.

@for $i from 1 to 5 {
   .list-#{$i} {
      width: 2px * $i;
   }
}
  • @each is another recursive directive that works a bit similar to a usual for loop.
@each $name, $style, $size in ((normal, bold, 10px), (emphasis, bold, 15px)) {
   .#{$name} {
      font-weight: $style;
      text-size: $size;
   }
}