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

allows you to write styling code in a way that looks like an HTML hierarchy
For example, without nesting, CSS code might look like:

.font .title { 

	font-family: "Times New Roman", serif; 

	font-size: 3em;

}

.font .text {

	font-family: "Times New Roman", serif; 

	font-size: 1em;

}

SASS allows you to reduce repetitiveness and put everything in one class

.font {

	.title {
	font-family: "Times New Roman", serif;
	font-size: 3em;

	.text {
	font-family: "Times New Roman", serif;
	font-size: 1em;/div>    
    }       
    }
}

Mini-hack

Write out the SASS equivalent for the following CSS code:

.a .b {
    color: green;
}

.a .c {
    color: blue;
}

SASS Equivalent

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

Extend/Inheritance

the buttons have the same width, height, and font but they have different background colors
SASS allows you to specify differences in one selector whereas with CSS, you would need to specify properties for separate buttons
SASS allows you to use @extend to inherit code if you want to reuse portions of code in multiple selectors
we can create a placeholder class that stores the code we want to reuse. A placeholder class looks like this:

//syntax

%class-name { 
}

//Examples

%buttonLayout {
	width: 15em;
	height: 15em;
	color: #ffffff;
	margin-right: 10%;
}

this is what the code looks like to make the buttons share code. But, you can still individually customize each button

.gettingStartedButton, .nestingButton, .extendButton {
	@extend %buttonLayout;
}

.gettingStartedButton {
	background: radial-gradient( #1539db, #8a8ce6);
}

.nestingButton {
	background: radial-gradient( #3a9fa7, #8ae0e6);
}

.extendButton {
	background: radial-gradient( #643aa7, #d78ae6);
}

Mixin

similar to "extend" because it creates a code template that can be reused
it can also take in parameters so that you can create dynamic styling
you can also place styling rules that do not take in variables within mixin
This is how you create a @mixin

@mixin buttonLayout($innerColor, $outerColor) {
    //the background takes in variables
	background: radial-gradient($innerColor, $outerColor); 

    //these styling rules do not take in variables
    width: 15em;
	height: 15em;
	color: #ffffff;
	margin-right: 10%;
	border-radius: 2em;

}

This is how to call the mixin in a scss selector

.gettingStartedButton {

	@include buttonLayout(#1539db, #8a8ce6);

}

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

.designTest {
    @include design(#1539db, 24);
}

Function

Function in SASS follow this format:

@function name(parameters) [
    //code
    @return value;
]

Here is how to create an invert function in SASS (for light mode or dark mode)

@function sassInvert($r, $g, $b) {
    
    //the "$" creates new functions in sass
	$newColor: rgb(255 - $r, 255 - $g, 255 - $b); 

	@return $newColor;

}

functions are called by specifying the function name with parenthesis. inside the parenthesis you can specify arguments. For Example:

//selector called invert. this would go in the styling section

.invert {
    // instead of putting a single color, the background color calls the function to invert colors
	
    background-color: sassInvert(0, 0, 0);
	color: sassInvert(211,202,202);

}

Import

import helps to prevent SASS files from getting cluttered
there is a way to split code into multiple files and import them into one file. Here are the steps to do so
- to put the styling for function.html in another SASS file, first create a directory called _sass
- within the directory, create another SASS file. for example functionStyle.scss
- write your sass code in that file. Once you have finished, switch back to style.scss and import the file with @import "file-name"
- For instance, to import the functionStyle.scss file into style.scss , the import statement would be @import "functionStyle".

SASS Hacks

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

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

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

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

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

.danger {
  @include important-text;
  background-color: green;
}

// mixin to align text
@mixin align-text($alignment) {
  text-align: $alignment;
}

// using the mixin for different selectors
.text-center {
  @include align-text(center);
}

.text-left {
  @include align-text(left);
}

.text-right {
  @include align-text(right);
}

.text-justify {
  @include align-text(justify);
}

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.