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

  • CSS selectors can share the same element.
  • SASS provides a feature called nesting to write styling code in an HTML hierarchy.
  • SASS nesting makes code cleaner and more readable.
  • SASS nesting reduces repetition in code.

Mini-hack

Write out the SASS equivalent for the following CSS code:

.a {
    .b {
        color: green;
    }
    .c {
    color: blue;
    }
}

Extend/Inheritance

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

  • Buttons have common properties such as clickability, shape, size, border, gradient, and font.
  • Each design category of buttons has distinct options.

Notes

  • SASS allows for code reuse using @extend.
  • Buttons on the homepage have similarities and differences in their styling.
  • In CSS, specifying properties for each button selector would be necessary.
  • SASS can create a placeholder class using %class-name.
  • Code from the placeholder class can be called with @extend %class-name.

Mixin

  • The article discusses using mixins in SASS for creating reusable code templates.
  • Mixins are similar to extends, but they can take parameters to create dynamic styling.
  • In the example of button styling, a @mixin at rule is created with two colors as parameters.
  • The mixin can be called using @include and passing in the desired colors.
  • Mixins can also contain styling rules that do not 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 myMixin($color, $fontSize) {
  background-color: $color;
  color: $color;
  font-size: $fontSize;
}

.my-selector {
  @include myMixin(#FF5733, 16px);
}

Function

  • A toggle button can be created to change the SASS of a website, in the example below, it changes the theme.
  • SASS functions have a specific syntax: @function name(parameters) { //code @return value; }.
  • A function can be created to invert RGB colors, subtracting each RGB value from 255.
  • The invert function is called by specifying its name with parentheses and arguments inside them.

Click the button below to toggle between light and dark mode:

Import

  • It is important to manage cluttered SASS files.
  • Splitting the code into multiple files and then importing them into one file is very useful.
  • To create a separate file, a directory called _sass is to be created.
  • Recommended to create another SASS file for the specific code to be separated.
  • Import statement "@import 'file-name'" can be used to import the separated file into the main SASS file.

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)

    1. b. A scripting language that has many styling operations
    2. a. They are very similar in their function, but their syntax is slightly different
    3. a. SASS has more functions than CSS
    4. b. Syntactically Awesome Style Sheets.
    5. d. compute
    6. b. extend
    7. b. Directive

  3. Use SASS to create something that uses either extend or mixin. (0.9)

@mixin button-style {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    background-color: #0056b3;
  }
}

.button {
  @include button-style;
}

.button-large {
  @include button-style;
  font-size: 20px;
  padding: 15px 30px;
}
  1. 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.
  • Variables
    • One of the most useful features of SASS is the ability to define variables. Variables allow you to store and reuse values throughout your stylesheet, which can save you a lot of time and make your code more consistent.
  • Control Directives
    • SASS also offers control directives that allow you to write conditional statements and loops within your stylesheets. Control directives can be useful when you need to apply different styles based on specific conditions or when you need to generate styles dynamically.