Week 12: Sass

Agenda

Sass
- Variables
- Nesting
- Mixins & Extends
- Functions

In-Class Tutorial

Intro to Sass

Let's explore how we can make writing css more efficient with Sass!

Deliverables

In-Class 11

Sass File Structure

Let's set up a Sass folder that combines all of our patterns into one, easily re-usable, project folder!

Due: Fri Nov 25, 2022

Assignment 11

Sass Mixins & Functions

Set up the GitHub repository that we will be using for all of the assignments over the course of the semester.

Due: Sun Nov 27 2022

# Sass

Sass is a CSS pre-processor, which means that it is processed and generates the CSS before the CSS is sent to the browser.
As the designer / developer you will write the Sass commands to generate the CSS.
You will compile the Sass code into CSS.
The finished CSS is what will be linked to on the webpage, just like always.
The official website Sass website (opens new window)
There are other CSS pre-processors that you may encounter
LESS (opens new window) and Stylus (opens new window) are two popular ones.
The popularity of LESS has reduced lately. Sass and Stylus are the two most popular.

# Sass Installation

It can be installed in several ways.
We will be using the DART version of Sass.
About DART Sass (opens new window)
Install Instructions (opens new window)
We are using the DART version because it has the least issues with installs and running.
You can install Sass with Ruby but that requires extra install work for Windows.
You can install and run Sass with npm but it runs slower than with DART or RUBY.
On Windows you can use Choclatey package manager to install a stand alone version.
On OSX or Linux you can use HomeBrew to install a stand alone version.
You can run Sass in the browser with JavaScript but this is inefficient and forces the user to download more and do the processing.
We will be running it from the CLI with Dart-Sass
Go HERE (opens new window) to download the proper version for your Windows x64.
You will then need to add it to your PATH Environmental variable. Instructions (opens new window)

# Running Sass

For Sass to do the pre-processing we need to set it up.
We will have one folder where we save our .scss files
Then we run the command to compile the Sass and tell it where to put the newly generated .css file(s)
Let's say we have the following project structure
Now let's say that there is a file inside the sass folder called main.scss
We want to convert that file from Sass to CSS, so on the CLI, from the root folder of our project, we type:

sass sass/main.scss:css/main.css

That will run the compiler once to convert the Sass file into a file, inside the css folder, called main.css
If you wanted to convert ALL the files inside the sass folder into css files of the same name inside the css folder then type:

sass sass/:css/

TIP

Use imports in Sass to combine your Sass files into a single CSS file that can be linked to from your HTML

If you want to have Sass constantly watch your folder for changes to files as they are saved then you can use the --watch flag.
To stop Sass watching your files, use CTRL + C to stop it.

sass --watch sass/:css/

Finally, there are options for the output style of your CSS.
You can output your CSS in an expanded format that makes it easy for you to read.
OR
You can output your CSS in a compressed format that removes all the comments and extra whitespace so you have a small file-size that is better for sending to the browser.
Enter ONE of the lines below

sass --watch sass/:css/ --style expanded
sass --watch sass/:css/ --style compressed

1
2

For any of these sass commands there will also be a .css.map file that gets created.
The map file will be used to track changes between versions, determine where different parts of the file came from, and to provide debugging information to your IDE.

# Sass Syntax

Here is the basic Guide to Sass (opens new window)
Full Reference for Sass (opens new window)
Good Sass tutorial site (opens new window)
Multiple Sass tutorials on Hackr.io (opens new window)
Learning Sass video playlist (opens new window)

Key Sass concepts:

Variables
```
$font-stack: Helvetica, sans-serif;
```
1

Mixins

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box {
  @include transform(rotate(30deg));
}

1
2
3
4
5
6
7
8
9

Functions

@function double($size) {
  @return $size * 2;
  //20px  -> 40px   3rem -> 6rem
}
h1 {
  font-size: double($lg);
}

1
2
3
4
5
6
7

Nesting

.row {
  border: 1px solid #999;
  .col {
    background-color: #e4e4e4;
    padding: 1rem;
  }
}

1
2
3
4
5
6
7

Partials and Imports

/*  /sass/_some.scss */

@import "reset";

1
2
3

Extends

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
}

.message {
  color: #333;
  @extend %message-shared;
}

1
2
3
4
5
6
7
8
9

Interpolation
```
p.#{$name} {
  #{$attr}-color: blue;
}
```
1
2
3

# Playground for Testing Sass

There is a website, like CodePen, that you can use to test your Sass syntax
SassMeister (opens new window)

# To Do Before Week 13

Self-Directed To Do

Get familiar with the Bootstrap documentation (opens new window)
Complete Week 12: Sass File Organization
Review the final assignment

← Week 11: Animations, Transitions & Transforms Week 13: Bootstrap →