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?

Choice b. A scripting language that has many styling operations

What is the difference between SASS and SCSS?

Choice 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?

Choice a. SASS has more functions than CSS

What does SASS stand for?

Choice a. Systematically Arranged Sample Sheets

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

Choice d. compute

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

Choice b. extend

What is “@___” called?

Choice b. Directive

Use SASS to create something that uses either extend or mixin

In this code, I'm defining a fundamental button style with the .button selector that can be utilized for various types of buttons. To style the submit button, I'm inheriting the .button selector styles by utilizing the @extend directive, which incorporates the fundamental button style into the .submit-button selector. Additionally, I'm specifying new styles for the .submit-button selector to achieve the desired appearance.

.btn {
  padding: 10px;
  border: 1px solid #000;
}

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

Research of Additional SASS Features

SASS provides several directives that can be invoked using the @ symbol. These include:

@import`: This directive allows one SASS file to be imported into another.

@extend`: This directive enables styles to be inherited from one selector to another.

@mixin`: This directive permits the definition of a reusable set of styles.

@include`: This directive enables the inclusion of a mixin in a selector.

@if`: This directive is used to control code flow based on conditions.

@else: This directive is utilized to specify an alternate code path for an@if` statement.

@for`: This directive creates a loop that iterates a specific number of times.

@while`: This directive creates a loop that continues as long as a condition is true.

@each`: This directive is used to iterate over a list or map.

@function`: This directive defines a reusable block of code that returns a value.

@return`: This directive is used to return a value from a function.

@debug`: This directive prints a debug message to the console during compilation.

@warn`: This directive prints a warning message to the console during compilation.

@error`: This directive throws an error during compilation.

What makes SASS exciting is that, in addition to styling, it provides programming features similar to languages like JavaScript and Python. The @if, @else, @for, @while, @each, @function, and @return directives allow the creation of programs using SASS. Additionally, SASS offers debugging capabilities, warning messages, and error handling to ensure code quality.