SASS

Why SASS?

SASS is an improvement on CSS in that there are methods of abstraction. It is a language that is _ into CSS, which means that __, 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 selectors may share the same element
• SASS nesting --> style code using hierarchies

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 shape and configuration of the buttons are the same
• Same width, height, and font color.

Notes

• Can create placeholders that can store reusable code
• can use syntax like %buttonlayout and style in there. This can also be used later.

Mixin

• Creates code template that can be reused
• Can take in parameters for dynamic styling

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.

Function

• Function: can take in rgb value and returns the inverted rgb color.
• You call a function by specifying the name of the function with parenthesis.
• Arguments can be specified.

Import

• We can split code into multiple files and then combine them.
• We put one stylesheet in some other SASS file and then create a directory called _sass.

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.

SASS MCQ

1. SASS is a scripting language that has many styling operations (option b)
2. The difference between SASS and CSS is that the syntax is sightly different (option a)
3. One advantage of SASS over CSS is that SASS has more functions than CSS (option a)'
4. SASS stands for Systematically Arranged Sample Sheets (option a)
5. Compute is not an example of a SASS directive (option d)
6. The Mixin director is used to share rules and relationships between selectors (option c)
7. @__ is called a directive. (option b)

@mixin button-style {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
}
.button {
  @include button-style;
}

//extend button in place
.special-button {
  @extend .button;
  background-color: red;
}

Interpolation

• Interpolation is used to put SASS in unquoted strings.
• This is ideal for dynamically generating names and other headers

@mixin inline-animation($duration) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.pulse {
  @include inline-animation(2s) {
    from { background-color: yellow }
    to { background-color: red }
  }
}