Why SASS?

SASS is an improvement on CSS in that there are methods of abstraction. It is a preprocessor language that is compiled into CSS, which means that the SASS code is translated 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

  • Nesting is a useful feature in SASS that allows you to nest styles within other styles, making it easier to write and organize your code.
  • In SASS, you can nest selectors inside other selectors to create a hierarchy of styles.
  • To nest a selector inside another selector, simply write the child selector inside the parent selector.
  • When you nest a selector, the child selector inherits the properties of the parent selector.
  • You can also nest properties within a selector to group related properties together.
  • When you nest properties, the resulting CSS will be grouped together in a logical and organized way.
  • One thing to keep in mind when using nesting is to avoid nesting too deeply, as this can make your code difficult to read and maintain.

Mini-hack

Write out the SASS equivalent for the following CSS code:

.a .b {
    color: green;
}

.a .c {
    color: blue;
}

Answer

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

Extend/Inheritance

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

  • The colors, the width, the height, and the pop up feature

  • In Sass, extend is a way to share a set of CSS properties from one selector to another.

  • The @extend directive is used to extend one selector to inherit the styles of another selector.
  • To use @extend, first define a base selector with the properties you want to share, then use @extend to inherit those properties to another selector.
  • The syntax for @extend is @extend selector;, where selector is the name of the selector you want to extend.
  • When a selector is extended, it inherits all of the properties of the selector it's extending, and the CSS output will contain only one instance of those properties.
  • This can help keep your CSS lean and reduce duplication of styles.
  • It's important to note that @extend is not the same as nesting. Nesting is used to scope CSS rules to a specific context, while @extend is used to inherit properties from one selector to another.
  • Be cautious when using @extend as it can lead to unexpected styling if not used properly. It's generally recommended to use it sparingly and only in situations where it makes sense.

Mixin

  • Mixins allow you to define a set of CSS rules that can be reused throughout your stylesheet, similar to a function in programming.
  • Mixins can include properties, values, and even other mixins.
  • Mixins are defined using the @mixin directive, followed by a name and a block of CSS rules.
  • Mixins can take arguments, which allow you to customize the values of the properties in the mixin.
  • Mixins are included in your CSS rules using the @include directive, followed by the name of the mixin.
  • Mixins can be used to make your stylesheets more modular, reusable, and maintainable, by reducing duplication and promoting consistency.
  • Mixins can also help you to write more concise and readable CSS code, by abstracting away complex or repetitive styles into simple, named constructs.
  • Mixins are a powerful feature of Sass, and can help you to create efficient and flexible stylesheets that can be easily customized and adapted as your design evolves.

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

// Calling the mixin with a color of red and font size of 20px
.my-selector {
  @include my-mixin(red, 20px);
}

Function

  • Functions in SASS have a specific syntax: they begin with the keyword "@function", followed by the function name and any parameters in parenthesis.
  • The function body is defined inside curly braces, where the code is executed and a value is returned using the "@return" keyword.
  • The function in this example takes in three arguments, corresponding to the RGB color values of a given color, and subtracts each value from 255 to get the inverted color.
  • The resulting color is stored in a variable, which is then returned using the "@return" keyword.
  • To use the function, it must be called by name and any required arguments are passed inside parentheses.
  • In this example, the ".invert" class is defined with a background color and text color that are both inverted versions of black and a light gray color, respectively. -The resulting effect is that the background and text colors toggle between light and dark modes when the "Click me" button is pressed.

Import

  • You can use import in Sass to split your code into multiple files.
  • First, create a directory called _sass.
  • Within that directory, create another Sass file where you can write your code.
  • Once you're finished with the code, switch back to the main file and import the file with @import "file-name".
  • The import statement should not include the file extension.
  • Import statements are usually placed at the beginning of the main file.
  • Importing is useful for organizing code and keeping things maintainable.

SASS Hacks

  1. Take notes and complete the mini-hacks. (0.9) COMPLETED

  2. Complete the quiz questions and provide your answers in this notebook. (0.9) COMPLETED

What is SASS?

  • b. A scripting language that has many styling operations

What is the difference between SASS and SCSS?

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

  • a. SASS has more functions than CSS

What does SASS stand for?

  • b. Systematically Awesome Sample Sheets

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

  • d. compute

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

  • b. extend

What is “@___” called?

  • b. Directive

  1. Use SASS to create something that uses either extend or mixin. (0.9) See below

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

Using SASS to create something that uses mixin

@mixin button-style($background-color, $text-color, $font-size) {
  background-color: $background-color;
  color: $text-color;
  font-size: $font-size;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darken($background-color, 10%);
  }
}

.button {
  @include button-style(#0077FF, #FFFFFF, 16px);
}

.secondary-button {
  @include button-style(#F44336, #FFFFFF, 14px);
}

This code defines a reusable style for buttons using a SASS mixin. The @mixin block defines the style properties for buttons and allows for the use of variables. The button-style mixin takes three arguments - background color, text color, and font size - which are used to dynamically set those properties.

The .button and .secondary-button classes are then defined and assigned the button-style mixin using @include. This allows for the styles defined in the mixin to be applied to those classes.

In simpler terms, the code allows for the creation of nice-looking buttons with custom colors and font sizes by using the button-style mixin. This makes it easy to apply consistent button styles throughout a project.