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

While writing CSS, you may notice that many selectors share the same element.

For example, let's say you have a div element that controls the font. Inside the div element, you have two other divs that control the font size.

SASS provides a feature called nesting in which you can write styling code in a way that looks like an HTML hierarchy.

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 have the same width and height, font color, and spacing between each button. They have a different background color. If we were to write it out in CSS, we would need to specify these properties for each button selector.

With SASS, we can create a placeholder class that stores the code we want to reuse. A placeholder class looks like this:

Mixin

To give the buttons a background, we used background: radial-gradient();

Another way to code for the background is through the use of a mixin.

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:

In addition, you can also place styling rules that do not take in variables within mixin.

The code below shows how to style the rest of the button within a mixin:

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 style($color, $font-size) {

background-color: $color;

color: $color;

font-size: $font-size;

}

/ Call the mixin and pass in specific color and font size values /

.my-selector {

@include style(#ff0000, 16px);

}

Function

To change between light and dark mode, we can create an invert function in SASS.

Functions in SASS look like this:

@function name(parameters) {

//code

@return value;

}

A function can be created that takes in an rgb value and returns the inverted rgb color.

To invert colors, subtract each rgb value from 255.

The function looks something like this:

@function sassInvert($r, $g, $b) {

$newColor: rgb(255 - $r, 255 - $g, 255 - $b);

@return $newColor;

}

Functions are called by specifying the function name with parenthesis. Inside the parenthesis, you can specify the arguments.

For instance, the invert selector looks like this:

.invert {

background-color: sassInvert(0, 0, 0);

color: sassInvert(211,202,202);

}

Import

There is a way to split your code into multiple files and import them into one file.

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)

  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.

  1. b. A scripting language that has many styling operations
  2. a. They are very similar in their function, but their syntax is slightly different
  3. a. SASS has more functions than CSS
  4. b. Syntactically Awesome Style Sheets
  5. d. Compute
  6. b. Extend
  7. I'm not sure because the question doesn't make much sense. I'm guessing d. Token

// Define a mixin to create a gradient background

@mixin gradient-background($start-color, $end-color) {

background: $start-color;

background: linear-gradient(to bottom, $start-color 0%, $end-color 100%);

}

// Use the mixin to create a class with a blue-to-purple gradient background

.gradient-box {

@include gradient-background(#4a89dc, #8e44ad);

padding: 20px;

border-radius: 5px;

color: #fff;

}