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 to share the same element
  • SASS allows for nesting which lets you style like HTML
  • A div element controls font, and then you can create other elements within that one to alter size, color, etc ```
.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:

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

  • All have color gradients
  • They all have the same height and width
  • some differences are the colors
  • Same attributes except for the hue
  • We can create a placeholder class that stores the code we want to reuse
  • Example of placeholder:

%class-name { }

Can use SASS to specify height, width, color, and much more. A selector needs to be created for each button in order to call with extend. The color gradients are also specified in this area.

  1. Create a placeholder class for the layout of each button ``` %buttonLayout is the template each button %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;

} ```

  1. Customize each button.
    • use different background colors
    • they must be individually coded

Mixin

  • Similar to extend in that it creates code templates that can be reused and manipulated in order for styling
  • Mixin also allows for styling rules that do not take in variables

  • With the buttons example, mixin uses two colors to create one gradient

    • mixin can take in parameters to create dynamic styling:

      @mixin buttonLayout($innerColor, $outerColor) {

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

}
  • Can use mixin to place styling rules that don't take in variables

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(#6e0000, #000000, 14px); }

Function

  • An invert function is used to change between light and dark mode
  • The Sass function takes in an rbg value and returns an inverted rbg color

  • To invert colors, we need to 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 parentheses
  • Within those parentheses, you specify the arguments

Import

  • A Sass file can get cluttered if too much styling is configured
  • We 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 (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 example, 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.

Quiz Questions

  1. What is SASS?

    b. A scripting language that has many styling operations

  2. What is the difference between SASS and SCSS?

    a. They are very similar in their function, but their syntax is slightly different

  3. What is an example of an advantage of using SASS over just CSS?

    a. SASS has more functions than CSS

  4. What does SASS stand for?

    b. Syntactically Awesome Style Sheets

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

    d. compute

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

    b. extend

  7. What is “@___” called?

    b. Directive

Hack 3 

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

.submit-button {
  @extend .button;
  background-color: #977aff;
  color: #fff;
}

For this hack, I followed a W3Schools tutorial to create a basic button selector, ".button," which can be used for multiple different types of buttons. For the .submit-button selector, I used the styles from the .button index to create a submit button, and defined my own colors for it.

Extra Credit

Sass directives:

  • @import: imports one SASS file into another
  • @extend: inherits the style of one selector to another selector
  • @mixin: defines a set of styles as reusable
  • @include: includes a mixin into a selector
  • @if: controls the compilation of conditional code portions
  • @else: creates an alternate code path for an @if statement
  • @for: creates a loop that iterates for a set number of times
  • @while: creates a loop that continues for as long as the condition remains "true"
  • @function: defines a reusable block of code that can be called to return a value
  • @return: returns a value from a function, mentioned above
  • @debug: prints a debug message to the console
  • @warn: prints a warning message to the console
  • @error: prints an error message to the console, and occurs when specific conditions are not met

Sass can be used to create programs for other programming languages such as JavaScript and Python, using directives such as @if, @else, @for, @while, @each, @function, and @return.

Attributed to my team member, Shreya, who researched the list of sass directives that I used as a template