Why SASS?

SASS is an improvement on CSS in that there are methods of abstraction. It is a preprocessor language that is compiled into CSS, which means that SASS code is translated into CSS code, 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

  • Nesting in SASS is used to indent and arrange the code
  • Nesting makes it so that the code is organized

Mini-hack

Write out the SASS equivalent for the following CSS code:

.a .b {
    color: green;
}

.a .c {
    color: blue;
}
.a {
  .b {
    color: green;
  }
  .c {
    color: blue;
  }
}

Extend/Inheritance

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

  • The buttons share the ability to be clickable, shape, sizing, borders, color, and font

  • The buttons have different options for each design category

  • Inheritance is a way to share common properties among different selectors.

  • In SASS, inheritance can be achieved using the @extend directive.
  • The @extend directive is followed by the name of the selector to be inherited.
  • Inheritance can also be achieved using the :extend() pseudo-class in CSS.

Mixin

  • Allows you to define a set of styles once and reuse them throughout your stylesheet
  • Uses the @mixin directive
  • Can accept arguments
  • Use the @include directive followed by the name of the mixin and any arguments that need to be passed

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 myMixin($color, $font-size) {
  background-color: $color;
  color: $color;
  font-size: $font-size;
}

.mySelector {
  @include myMixin(blue, 10px);
}

Function

  • Arguments can be used
  • Called using function()
  • calc() allows you to perform calculations
  • EX: darken() and lighten() allow you to adjust a color's brightness
  • Functions can also be used to define variables that can be used throughout your stylesheet.

Import

  • Imported files can be Sass or CSS files
  • syntax is @import 'file-name'
  • Use partials for imported files, which start with an underscore (_)

SASS Hacks

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

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

  3. Use SASS to create something that uses either extend or mixin. (0.9)

  4. 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.

@mixin button($background-color, $font-color) {
  background-color: $background-color;
  color: $font-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  &:hover {
    background-color: darken($background-color, 10%);
  }
}

.button-primary {
  @include button(#3498db, #fff);
}

.button-secondary {
  @include button(#e74c3c, #fff);
}

Multiple Choice Quiz Questions

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
    • [A] A type of operating system used by many devices

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
    • [A] They are very similar in their function, but their syntax is slightly different

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.
    • [C] CSS takes up more bytes

What does SASS stand for?

  • a. Systematically Arranged Sample Sheets
  • b. Syntactically Awesome Style Sheets
    • [A] Systematically Arranged Sample Sheets

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

  • a. warn
  • b. debug
  • c. import
  • d. compute
    • [D] Compute

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

  • a. each
  • b. extend
  • c. mixin
  • d. error
    • [B] Extend

What is “@___” called?

  • a. Enhancement
  • b. Directive
  • c. Label
  • d. Token
    • [B] Directive