Using SASS

This article is based on the SASS official website: https://sass-lang.com/guide

Install SASS

There are many ways to install SASS. The easiest is to install the Plugin “Live SASS Compiler” for use with the Visual Studio Code editor. Features of this Plugin are:

• Live SASS & SCSS Compile.
• Customizable file location of exported CSS.
• Customizable exported CSS Style (expanded, compact, compressed, nested).
• Customizable extension name (.css or .min.css).
• Quick Status bar control.
• Exclude Specific Folders by settings.
• Live Reload to browser (Dependency on Live Server extension).
• Autoprefix Supported browsers.

SASS has a file extension either .scss or .sass. The structures of scss and sass files are slightly different. However, it is recommended to use .scss extension as its structure is more similar to standard CSS file.

Variables

Sass uses the $ symbol to make something a variable.

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

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

body {
   font: 100% Helvetica, sans-serif;
   color: #333;
 }

Nesting

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.

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

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

You’ll notice that the ul, li, and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable.

Partials

Partial Sass files refer to files that contain little snippets of CSS that you can include in other Sass files. These are files that named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule.

Modules (@use ‘file’)

The @use rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename.

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

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

@use 'base';

.inverse {
   background-color: base.$primary-color;
   color: white;
 }

body {
   font: 100% Helvetica, sans-serif;
   color: #333;
}

.inverse {
   background-color: #333;
   color: white;
}

Mixins (@mixins name -> @include name)

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here’s an example for transform.

@mixin transform($property) {
   -webkit-transform: $property;
   -ms-transform: $property;
   transform: $property;
}
.box { 
   @include transform(rotate(30deg)); 
}

.box {
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   transform: rotate(30deg);
}

To create a mixin you use the @mixin directive and give it a name. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

Extend / Inheritance (@extend %class)

Using @extend lets you share a set of CSS properties from one selector to another. The %class is known as “placeholder class”.

/* This CSS will print because %message-shared is extended. */
 %message-shared {
   border: 1px solid #ccc;
   padding: 10px;
   color: #333;
 }
 // This CSS won't print because %equal-heights is never extended.
 %equal-heights {
   display: flex;
   flex-wrap: wrap;
 }
 .message {
   @extend %message-shared;
 }
 .success {
   @extend %message-shared;
   border-color: green;
 }
 .error {
   @extend %message-shared;
   border-color: red;
 }
 .warning {
   @extend %message-shared;
   border-color: yellow;
 }

You can extend most simple CSS selectors in addition to placeholder classes, but using placeholders is the easiest way to make sure you aren’t extending a class that’s nested elsewhere in your styles, which can result in unintended selectors in your CSS.

Note that the CSS in %equal-heights isn’t generated, because %equal-heights is never extended.

Operators

Sass supports standard math operators like + , – , * , / , and %.

.container {    
   width: 100%;  
}  
article[role="main"] {    
   float: left;    
   width: 600px / 960px * 100%;  
}  
aside[role="complementary"] {
   float: right;    
   width: 300px / 960px * 100%;  
} 

.container {
   width: 100%;
 }
 article[role="main"] {
   float: left;
   width: 62.5%;
 }
 aside[role="complementary"] {
   float: right;
   width: 31.25%;
 }

Note that in the above example, the width in pixel in Sass is converted to % in CSS.

Reference

1. CSS with superpowers