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

  • Many different selectors and objects may share the same element.
  • Through nesting, you can write the styling code in a heirarchy

Mini-hack

Write out the SASS equivalent for the following CSS code:

.a .b {
    color: green;
}

.a .c {
    color: blue;
}

SASS equivalent:

.a {
    .b {
    color: green;

    .c {
    color: blue;
}}}

Extend/Inheritance

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

Take notes here:

  • The buttons have the same size - width, height
  • They also have the same font size and font color
  • The spacing of the buttons are also similar
  • The background colors of the buttons differ

Mixin

  • Creates a code template that can be reused
  • Can also accept parameters so that dynamic styling can be utilized
  • Create mixin through @mixin and call it through @include

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.

SASS code:

@mixin testCode($testColor, $fontSize) {
    background: $testColor;
    color: $testColor;
    font-size: $fontSize;
}
.testCodeSelector {
    @include testCode(#00ffc1, 10px);
}

Function

Take notes here:

  • Can be created in SASS using @function
  • Like a function in a Python, it follows the format functionName(Parameters)
  • There should also be brackets after, like a Javascript function
  • Are called by specifying the function name with parenthesis
    • Inside the parenthesis, define the arguments that the function will take in as parameters

Import

Take notes here:

  • SASS code can be split into multiple files and imported into one file
  • For example, create a directory called _sass
    • You can create multiple files in here, such as style.scss and color.scss
    • If you want the code from style.scss to be imported into color.scss, use the command @import "style"
    • The .scss is not needed and there has to be quotation marks around the function name

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.

Quiz Answers

  1. B
  2. A
  3. C
  4. B
  5. D
  6. B
  7. B

Researched SASS features

Variables:

  • Enables users to define values
    • Can be used to define colors, font sizes, margins, padding values, and more.

Control Directives:

  • Some examples are @if, @for, and @each
  • These enable us to write conditional statements and loops, and also allow iteration

Partials:

  • Partial SASS files that contain small code segments
  • Can be included in other files
  • Is an easy way to organize code
  • Name with an underscore like _partial.scss

Modules:

  • Can be used to split SASS code in a single file
  • @use
  • Loads another SASS file as a module
    • Its variables, mixins, and functions can be accessed

SASS Creation

Link

Code screenshot:

SASS