Why SASS?

SASS is a preprocessor language that is compiled into CSS, which means that SASS code is translated into CSS code, 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:

Sure! Here are some bullet points on nesting in SASS:

  • SASS allows for nesting of CSS rules, which can make the code easier to read and organize.
  • To nest a rule in SASS, simply indent it under the parent rule.
  • For example, to nest a ul element inside a nav element, you could write:
nav {
  ul {
    /* nested CSS rules go here */
  }
}
  • You can also nest pseudo-selectors and media queries in SASS.
  • It's important to be mindful of over-nesting, as it can lead to overly-specific CSS and make the code harder to maintain.

Mini-hack

Write out the SASS equivalent for the following CSS code:

.a .b {
    color: green;
}

.a .c {
    color: blue;
}

SASS:

.a {
  .b {
    color: green;
  }

  .c {
    color: blue;
  }
}

Extend/Inheritance

What are some similarities that the buttons share? What are the differences?

Take notes here:

Extend

  • @extend is a feature in SASS that allows you to share a set of CSS properties from one selector to another.
  • This allows you to keep your CSS DRY (Don't Repeat Yourself).
  • Syntax: @extend selector;

  • Example:

    .button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
}

.button-small {
  @extend .button;
  padding: 5px 10px;
  font-size: 12px;
}
    • The .button-small class extends the styles of .button while also adding some new styles specific to .button-small.
    • The resulting CSS will have the styles for .button-small and .button combined, so .button-small will have padding, background-color, color, and font-size properties.

Inheritance

  • SASS supports inheritance through the use of the @extend directive.
  • Inheritance allows you to create a base style and extend it to child selectors.
  • This is useful for creating consistent styles for elements that share similar characteristics.

  • Example:

    %button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
}

.button-small {
  @extend %button;
  padding: 5px 10px;
  font-size: 12px;
}
    • %button is called a placeholder selector, and it defines a set of properties that can be extended by other selectors.
    • .button-small extends %button, and the resulting CSS will have the styles for .button-small and %button combined.

Mixin

Take notes here:

  • Mixins in Sass allow you to group a set of CSS declarations and reuse them throughout your code.
  • Mixins are defined using the @mixin directive, followed by a name and a set of CSS declarations in curly braces.
  • Mixins can also accept arguments, which can be used to customize the output of the mixin.
  • Mixins are included in other selectors using the @include directive, followed by the name of the mixin.
  • Mixins can be used to help keep your code DRY and reduce repetition.

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 bg-font-color($color, $font-size) {
  background-color: $color;
  color: $color;
  font-size: $font-size;
}

.my-selector {
  @include bg-font-color(#FF5733, 32px);
}

Function

SASS functions are reusable blocks of code that perform specific tasks and return a value. They can accept arguments and can be used to manipulate data before outputting a value. SASS provides built-in functions for common operations such as math, string manipulation, and color manipulation, and also allows you to define custom functions.

Import

SASS @import directive is used to include one SASS file in another. When @import is used, the contents of the imported file are included in the CSS output.

Some important things to note about SASS @import:

  • The file extension .scss is optional
  • You can import a partial file (file name starting with an underscore _partial.scss) to prevent it from being compiled to its own CSS file
  • When importing a file, the path is relative to the current file being compiled
  • You can import multiple files at once by separating the file names with commas
  • SASS supports importing CSS files as well as SASS files
  • It is recommended to use @use instead of @import in newer versions of 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) Multiple Choice Quiz Questions What is SASS? a. A type of operating system used by many devices -> b. A scripting language that has many styling operations c. The name of a commonly used computer networking system d. A debugging system with many features

What is the difference between SASS and SCSS? -> a. They are very similar in their function, but their syntax is slightly different b. They are the exact same, but SASS is more commonly used c. SASS was developed by a larger company

What is an example of an advantage of using SASS over just CSS? a. SASS has more functions than CSS b. SASS is not as expensive to use than CSS -> c. CSS takes up more bytes d. CSS is not as commonly used, so it’s hard to find solutions to problems that arise while coding in it.

What does SASS stand for? a. Systematically Arranged Sample Sheets -> b. Syntactically Awesome Style Sheets

Which of the following is NOT an example of an available SASS directive? a. warn b. debug c. import -> d. compute

The __ directive is used to share rules and relationships between selectors. a. each -> b. extend c. mixin d. error

What is “@___” called? a. Enhancement b. Directive -> c. Label d. Token

  1. Use SASS to create something that uses either extend or mixin. (0.9) ``` %button { background-color: blue; color: white; padding: 10px; border-radius: 5px; }

.submit-button { @extend %button; font-size: 18px; }

.cancel-button { @extend %button; border: 2px solid red; }

5. 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. Variables: Sass allows you to define variables that can be reused throughout your stylesheets. This makes it easy to make global changes to your styles by simply changing the value of a variable.

Example: 

```scss
$primary-color: #007bff;

button {
  background-color: $primary-color;
  border-color: $primary-color;
  color: #fff;
}
  1. Operators: Sass allows you to perform basic math operations on values, making it easier to create complex styles.

Example:

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 30px;

  @media (min-width: 768px) {
    padding: 50px;
    width: 75%;
  }
}
  1. Control Directives: Sass provides several directives that allow you to control the flow of your code, including @if, @for, @each, and @while.

Example:

@for $i from 1 through 12 {
  .col-#{$i} {
    width: 100% / 12 * $i;
  }
}
  1. Partials: Sass allows you to split your styles into smaller files, called partials, which can then be included in your main stylesheet using @import.

Example:

// _variables.scss

$primary-color: #007bff;
$secondary-color: #6c757d;

// main.scss

@import 'variables';

body {
  background-color: $secondary-color;
  color: $primary-color;
}