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

  • The same element may be shared by several separate selectors and objects.
  • You can write the styling code in a heirarchy by using nesting.

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?

  • The width and height of each button are the same.
  • Additionally, the font size and color are identical.
  • The button spacing is likewise comparable.
  • The buttons' backgrounds have various hues.

Mixin

  • generates a reusable code template
  • can also accept parameters, allowing for the use of dynamic styling
  • @mixin is used to create a mixin, and @include is used to call it.

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 color-and-font($color, $font-size) {
  background-color: $color;
  color: $color;
  font-size: $font-size;
}
.my-class {
  @include color-and-font(#008000, 16px);
}

Function

  • can be produced using @function in SASS.
  • It has the same format as a Python function, functionName(Parameters).
  • Additionally, brackets should follow, just like in a JavaScript function.
  • by including the function name in parenthesis when calling them.
    • Define the arguments that the function will accept as parameters between parenthesis.

Import

  • Code written in SASS can be imported into one file from numerous files.
  • Make a directory called "_sass", for instance.
  • Here, you can generate numerous files, including 'style.scss' and 'color.scss' Use the command @import "style" to import the code from 'style.scss' into 'color.scss'. There must be quotation marks around the function name and the '.scss' is not required.

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
  2. A
  3. C
  4. B
  5. D
  6. B
  7. B

Variables:

  • permits users to specify values
  • is useful for specifying things like colors, font sizes, margins, padding values, and more.

Partial SASS files:

  • Partial SASS files that contain small code segments
  • Name with an underscore like partial.scss
  • A much more efficient way to organize code
  • Can be incorporated in multiple other files
  • Examples of control directives are:
  • @if, @for, and @each.
  • These allow us to create loops and conditional statements, as well as iteration.

Using modules:

  • SASS code can be divided into multiple files @use.
  • loads a different SASS module file.
  • You can access its variables, mixins, and functions.

Hack Link

Code