CSS Preprocessors

Sass (SCSS)

Sass (Syntactically Awesome Stylesheets) or its subvariant SCSS is one of the most widely used CSS preprocessors. It provides features like variables, nesting, partials, imports, mixins, extends, and operators. For the purpose of this course we will be using the subvariant SCSS because it is used more often in the real world.

Here are some basic features of SCSS:

Variables: You can define values to variables, and then reuse these variables throughout the Sass file.
Nesting: Sass allows CSS rules to be nested within one another.
Mixins: A mixin is a group of CSS declarations that you can reuse throughout your site.

Environment Setup

SCSS is not natively understood by browsers. You need a compiler to convert your SCSS code into regular CSS. In this lesson, we will use Node.js and npm (Node Package Manager) to install and manage our SCSS compiler.

Install Node.js and npm: Visit the official Node.js website to download and install Node.js, npm is included with Node.js.
Install SCSS compiler: We will use a package called sass to compile our SCSS to CSS. Open your Command Line (CLI) or Powershell as an Administrator, and run the following command:
```
npm install -g sass
```
This will install sass on your local machine globally thanks to the -g flag.
To compile your SCSS files into CSS, navigate to your project root folder inside the Command Line or Powershell and use the following command.
```
sass scss-folder/:css-folder/
```
sass: This is the command-line interface for the Node.js package sass. Sass is a library that allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.
scss-folder/: This specifies the source folder where your .scss files are located. The command will process all .scss files inside this directory. The trailing slash indicates it is a directory.
:: This is a flag for the sass command. Used to specify the output directory for the compiled CSS files.
css-folder/: This is the destination folder where the compiled CSS files will be saved. Again, the trailing slash indicates it is a directory.

When you run this command, if you get an error saying:

file.ps1 is not digitally signed. You cannot run this script on the current system

Open up PowerShell as an Administrator and run the following command:

Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope LocalMachine

After that, everything should be good to go.

Writing SCSS

Create a new file with the extension .scss (for example, styles.scss). SCSS syntax is very similar to CSS, but it also allows us to use some additional features.

Compiling SCSS to CSS

Once you have written your SCSS, you need to compile it to CSS. Here is a simple command you can use to compile a single SCSS file to CSS:

sass styles.scss styles.css

First keyword is the command line sass, second is the path to the SCSS file and third is the path to where you want the file compiled into CSS.

For a bigger project, you might want to watch your SCSS files and automatically compile them whenever they change as well as compile all files in a certain folder. Here is a command to do that:

sass scss/:css/ --watch

This command will compile all scss files from a folder named /scss to a folder named /css. Make sure you created the folders, or the command will fail.

The --watch flag is used to watch the files for changes, so you don’t have to run the command every time you save a file. You can also use the --watch flag for single file compiling.

SCSS Variables and Nesting

Here are some basic examples of SCSS syntax:

/* Variables */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

/* Nesting */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
 
  li {
    display: inline-block;
  }
 
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

SCSS Nesting Media Queries

SCSS allows nesting of media queries which is a powerful feature that allows you to write media query styles directly within a selector, leading to more organized and maintainable code. In traditional CSS, media queries are typically written as separate blocks of code, but SCSS's nesting capability allows you to define responsive styles right where they're relevant.

Here’s an example to demonstrate nested media queries in SCSS:

$tablet: 768px;
$desktop: 1024px;

.container {
  width: 100%;

  // Nested media query for tablet devices
  @media (min-width: $tablet) {
    width: 80%;
  }

  // Nested media query for desktop devices
  @media (min-width: $desktop) {
    width: 60%;
  }
}

This example shows how SCSS allows for a clean and organized structure by placing media queries directly within the selectors they affect. This approach makes it easier to understand how different styles are applied at various breakpoints, and it also reduces the complexity of managing styles across large stylesheets.

SCSS Mixins

A mixin lets you define styles that can be reused throughout the stylesheet without having to re-write the code. Mixins are a way to include ("mix in") a bunch of properties from one rule-set into another rule-set. They are typically used when a group of CSS declarations are reused throughout a stylesheet.

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

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

SCSS Functions

SCSS allows us to define our own functions and use them in our stylesheets. These functions can calculate values and return them.

Function for Converting Pixels to Rem:

We can create a function that converts pixel values to rem.

@function pxToRem($size) {
    $remSize: $size / 16;
    @return #{$remSize}rem;
}

.container {
    font-size: pxToRem(32);
}

Function for Stripping Units:

Sometimes, you might need to perform math operations with mixed units. This function will help strip the unit from a value.

@function stripUnit($value) {
    @return $value / ($value * 0 + 1);
}

.container {
    width: stripUnit(100px) * 1em;
}

These mixins and functions should provide a solid understanding of how to write and use your own mixins and functions in SCSS. Try to implement them in your stylesheets and see how they can help make your CSS code cleaner and more efficient.

Desired Outcomes