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

  • SASS provides a feature called nesting in which you can write styling code in a way that looks like an HTML hierarchy.
  • It allows you to write with many diffrent sectors

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?

  • They have the same shape and size but the color is diffrent and the text on the boxes are diffrent
  • The backgounds differ
  • THey use the same properties

Mixin

  • Mixin allows to take in parameters and give it back
  • IT is like a procedure but with saas and it is a type of property which give it better usage within industry
  • you can do a lot wiht mixin

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

.custom-selector {
  @include custom-style(#91ff00, 18px);
}

Function

  • Function are avalble within saas
  • They can call with paranthesis and are like parameters in python

Import

  • Imports are to prevent clutter through files
  • You can make many files like style.css and store them in one places

Quiz Answers

B A C B D B B

// Using Mixin To create buttons that are blue and gray 

@mixin button($color, $bg-color, $border-radius) {
  display: inline-block;
  padding: 10px 20px;
  background-color: $bg-color;
  color: $color;
  border-radius: $border-radius;
  text-decoration: none;
}

.button-primary {
  @include button(#fff, #007bff, 5px);
}

.button-secondary {
  @include button(#fff, #6c757d, 5px);
}

More Features EXTRA CREDIT

  • Within saas there is another features such as control directives; this allows for usage of if else and for which are conditionals likewise used in python
  • Color functions are another saas feature which alow oyu to lighten() darken() and saturate() backgrounds and buttons within SAAS these are more properties that are usen through saas

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.