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 selectors share the same element
nesting allows you to write styling code in a way that looks like an HTML hierarchy
have a div element that controls font --> within that div element, create two other div elements that control the font size

.font {

    .title {

    font-family: "Times New Roman", serif;

    font-size: 3em;

    .text {

    font-family: "Times New Roman", serif;

    font-size: 1em;/div>

}

<div class="font">

    <div class="title">

    <p>Title</p>

    </div>

    <div class="text">

    <p>This is some text</p>

    </div>

</div>

Mini-hack

Write out the SASS equivalent for the following CSS code:

CSS
.a .b {
    color: green;
}

.a .c {
    color: blue;
}

SASS
.a {
  .b {
    color: green;
  }

  .c {
    color: blue;
  }
}

Extend/Inheritance

The buttons on the home page have different colors
They have different color fill patterns: some are solid color, and some are ombre
Same width and height
Same font color
Same spacing between each button
We can create a placeholder class that stores the code we want to reuse
Example of placeholder: %class-name { }

1. Creation of a Placeholder class for Button Layout

%buttonLayout is like template for specific buttons we want to make

%buttonLayout {

    width: 15em;

    height: 15em;

    color: #ffffff;

    margin-right: 10%;

}

2. Create a selector for each button

call code from the placeholder class using @extend %class-name

.gettingStartedButton, .nestingButton, .extendButton {

    @extend %buttonLayout;

}

3. Customize each button.

Since each button has a different background color, we need to individually code the background color within each selector

.gettingStartedButton {

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

}

.nestingButton {

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

}

.extendButton {

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

}

Mixin

use background: radial-gradient(); to give buttons background color
could also use mixin to code for background
mixin creates code template that can be reused
mixin can take in parameters --> you can create dynamic styling
can create @mixin that takes in two colors to create a gradient

@mixin buttonLayout($innerColor, $outerColor) {

    background: radial-gradient($innerColor, $outerColor);

}

to call mixin, create a selector
call the mixin using @include
code below sets the background color of the Getting Started button to a gradient blue

.gettingStartedButton {

    @include buttonLayout(#1539db, #8a8ce6);

}

can place sytling rules that don't take in variables within mixin
code below shows how to style the rest of the button within a mixin

@mixin buttonLayout($innerColor, $outerColor) {

    background: radial-gradient($innerColor, $outerColor);

    width: 15em;

    height: 15em;

    color: #ffffff;

    margin-right: 10%;

    border-radius: 2em;

}

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

    background-color: $color;
    font-color: $color;
    font-size: $font-size

}

.selector {
    @include newFont(#FF5733, #000000, 14px);
}

Function

Example of Functions in SASS

@function name(parameters) {

    //code

    @return value;

}

to change between light and dark mode, an invert function is created in SASS
function takes in an rbg value and returns inverted rbg color
to invert colors, subtract each rgb value from 255

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

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

    @return $newColor;

}

you can call functions by specifying the function name with parenthesis
within the parenthesis, you specify the arguments

.invert {

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

    color: sassInvert(211,202,202);

}

Import

SASS file can get cluttered if we are configuring a lot of styling for each page
Can split 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

Take notes and complete the mini-hacks. (0.9)
Complete the quiz questions and provide your answers in this notebook. (0.9)
Use SASS to create something that uses either extend or mixin. (0.9)
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.

Multiple Choice Quiz Questions

What is SASS?

b. A scripting language that has many styling operations

What is the difference between SASS and SCSS?

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

What does SASS stand for?

a. Systematically Arranged Sample Sheets

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

d. compute

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

b. extend

What is “@___” called?

b. Directive

Use SASS to create something that uses either extend or mixin

.button {
  padding: 10px;
  border: 1px solid #000000;
}

.submit-button {
  @extend .button;
  background-color: #007bff;
  color: #fff;
}

Here, I am creating a basic button selector, .button, which can be extended to different kinds of buttons. For the .submit-button selector, I inherit the styles from the .button selector to include it in the submit button, in addition to the new styles I want to use/have defined for the submit-button.

Research of Additional SASS Features

There are many SASS directives, which can be called using @
@import: used to import one SASS file into another.
@extend: used to inherit styles from one selector to another.
@mixin: used to define a reusable set of styles.
@include: used to include a mixin in a selector.
@if: used to control the flow of code based on conditions.
@else: used to define an alternate code path for an @if statement.
@for: used to create a loop that iterates a specific number of times.
@while: used to create a loop that continues as long as a condition is true.
@each: used to iterate over a list or map.
@function: used to define a reusable block of code that returns a value.
@return: used to return a value from a function.
@debug: used to print a debug message to the console during compilation.
@warn: used to print a warning message to the console during compilation.
@error: used to throw an error during compilation.

SASS is cool because unlike CSS which mostly just allows you to do styling, you can also use SASS to create programs like other programming languages such as JavaScript and Python, using the directives @if, @else, @for, @while, @each, @function, and @return. You can even go as far as to debug your SASS code, print warning messages, and warn for errors.