Sass

Sass stands for syntactically awesome style sheets and is a stylesheet language that is compiled into CSS. It is also what’s known as a style preprocessor. The code written in Sass is compiled and outputs CSS.

The official website for Sass is: https://sass-lang.com/.

Some of the popular features of Sass include:

Variables

Variables allow you to store information for reuse throughout the stylesheet. In Sass, variables start with the $ sign and use the format of <variablename>: <expression>.

They allow the CSS style to be changed easily in one place rather than having to find every instance of that particular item.

Common variable usage includes setting background colors, text colors, fonts, etc.

$offwhite: #EEE8D6;
$darkblue: #022933;
$red:      #d14348;

$color-main: $darkblue;
$color-background: $offwhite;
$color-headlines: $red;

$font-main: 'Merriweather Sans', Helvetica, sans-serif;
$font-highlight: 'Bree Serif', Helvetica, sans-serif;

Nesting

Nesting allows you to write style rules inside another that will automatically combine the outer rule’s selector with the inner rule selector. It sets CSS selectors in a hierarchy matching HTML

Sass:

/* scss file */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }

Compiled CSS:

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

Mixins

Mixins allow you to define styles that can be re-used throughout the stylesheet. They can be set up with parameters (with defaults) and variables to make them flexible.

Sass:

@mixin replace-text($image, $x: 50%, $y: 50%) {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;

  background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}

Compiled CSS:

.mail-icon {
  @include replace-text(url("/images/mail.svg"), 0);
}   .mail-icon {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;
  background-image: url("/images/mail.svg");
  background-repeat: no-repeat;
  background-position: 0 50%;
}

Extending Classes

When you add the @extend rule to a style class, it writes the CSS code so that the current class inherits the styles of another.

Typically, you will see HTML code with multiple style classes so that you can apply the base style and then any modifiers to that base style. By using the @extend rule, we can rewrite our HTML code to only use the modifier necessary without the additional base class(es). See the example below.

Original HTML file:

<!-- html code -->
<button class='btn btn-default'>Default</button>
<button class='btn btn-cool'>Cool</button>
<button class='btn btn-hot'>Hot</button>

If we add the @extend rule in the modifiers in the Sass file as on the left, it will produce a CSS file as on the right. Notice how all of the modifiers are included on the top line.

SCSS file:

/* scss code */

.btn {
  display: inline-block;
  padding: 6px 12px;
  text-align: center;
  cursor: pointer;
  color: #fff;
}

.btn-default {
  @extend .btn;
  background: $color-btn-default;
}

.btn-hot {
  @extend .btn;
  background: $color-btn-hot;
}

.btn-cool {
  @extend .btn;
  background: $color-btn-cool;
}

CSS file after processing:

/* css code - All classes have the base settings */

.btn, .btn-default, .btn-hot, .btn-cool {
  display: inline-block;
  padding: 6px 12px;
  text-align: center;
  cursor: pointer;
  color: #EEE8D6; }

.btn-default {
  background: #022933; }

.btn-hot {
  background: #d14348; }

.btn-cool {
  background: #0076a3; }

And that allows us to remove the base class and only use the modifiers. So our HTML code can now look like this, with only one class name needed:

<!-- revised html code -->
<button class='btn-default'>Default</button>
<button class='btn-cool'>Cool</button>
<button class='btn-hot'>Hot</button>

Operators

We can use math in Sass to automatically format things for us. Sass can add, subtract, multiply and divide using standard math operators like +, -, *, /, and %.

For an example, consider a grid of images that need to be arranged. Below are the code snippets demonstrating how to automatically do this using Sass operators.

HTML code for list of images:

<div class="grid">
  <div class="item"><img src="http://placehold.it/500x500" alt="thumbnail"></div>
  <div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
  <div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
  <div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
  <div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
  <div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
  <div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
  <div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
  <div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
  <div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
  <div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
  <div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
  <div class=“item”><img src="http://placehold.it/500x500" alt="thumbnail"></div>
</div>

Sass code:

// Image Grid mixin
@mixin imagegrid($qty, $margin) {
  width: ((100% - (($qty - 1) * $margin))/$qty);
  &:nth-child(n) {
    margin-right: $margin;
    margin-bottom: $margin;
  }
  &:nth-child(#{$qty}n) {
    margin-right: 0;
    margin-bottom: 0;
  }
}

.grid {
  @include clearfix;
  .item {
    float: left;
    @include imagegrid(5, 1%);
  }
  img {
    display: block;
    border-radius: 10px;
    max-width: 100%;
  }
}

CSS code:

.grid:before, .grid:after {
  content: '';
  display: table; }

.grid:after {
  clear: both; }

.grid .item {
  float: left;
  width: 19.2%; }
  .grid .item:nth-child(n) {
    margin-right: 1%;
    margin-bottom: 1%; }
  .grid .item:nth-child(5n) {
    margin-right: 0;
    margin-bottom: 0; }

.grid img {
  display: block;
  border-radius: 10px;
  max-width: 100%; }

Page in Web Browser:

Operators

This gives us a lot of flexibility with changing the layout for items on the web page.

Comments

Comments in Sass can be marked with beginning slash asterisk and a closing asterisk slash (/* Comment */) or with two slashes (// Comment). However, it is important to note that there are some differences in how these comments behave.

  • Comments marked with the two slashes // Comment will never show up in your processed CSS file.

  • Comments marked with the slash asterisk /* Comment */ will show up in your processed CSS file if your compiler has the setting of style: "expanded".

  • If you want to hide the comments in your compiled CSS file, you can use style: “compressed".

  • If you are using the compressed setting for compiling your CSS and you want a specific comment to show up, you can mark it with an exclamation point like this: /*! Comment */.

These are useful for things like copyright statements that need to be shown.

Lists

Lists contain a sequence of other values. In Sass, the list can be separated by commas or by spaces as long as it’s consistent within the list. You can have lists with only one value and you can have an empty list. One thing to note about lists in Sass is that they are not zero indexed, meaning that the first item in the list is at position 1 (rather than position 0 as it is in Python).

To access the elements in the list, use the function nth($listname, $n) where the $listname is the variable representing the list and $n is the position of the element in the list.

LOOPING THROUGH LISTS

One of the most common uses for a Sass list is to configure the processor to do something for each element in the list as shown in the examples below.

Using @each

// style.scss file 
@each   $sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}
/* style.css file */
.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

Using @for

// style.scss file
$color-headlines: $blue, $purple, $green, $red, $orange, $yellow;

h1, h2, h3, h4, h5, h6 {
  font-family: $font-highlight;
}

@for $item from 1 through length($color-headlines) {
  h#{$item} {
    color: nth($color-headlines, $item);
  }
}   
/* style.css file */
h1, h2, h3, h4, h5, h6 {
  font-family: "Bree Serif", Helvetica, sans-serif; }

h1 {color: #0076a3; }
h2 {color: #6d73c2; }
h3 {color: #548c27; }
h4 {color: #d14348; }
h5 {color: #f39856; }
h6 {color: #ffba00; }

Maps

Maps in Sass are arrays that hold key, value pairs just like a dictionary in Python. There are many functions in Sass to create the maps and access the values within them.

SCSS file:

/* scss file */
// Map the colors to the button name
$color-btn: (
  default: $color-main,
  hot: $red,
  cool: $blue
);

// Extend the base value of the class using color mapping
@each $key, $value in $color-btn {
  .btn-#{$key} {
    background-color: $value;
  }
}

CSS file

/* css file */
.btn-default {
  background-color: #022933; }

.btn-hot {
  background-color: #d14348; }

.btn-cool {
  background-color: #0076a3; }

Import

Sass lets you break down your code into modular pieces or partials using the @import command. This means you can have a separate file relevant to each style object. Note: Files that are partials are designated with an underscore _ at the beginning of the file name.

For example, you could structure your Sass directory like this:

sass/
    base/
        _variables.scss
        _mixins.scss
    modules/
        _navbar.scss
        _footer.scss
        ...
    style.scss

And your style.scss file might look like this:

/* Project specific CSS styles */

// Base settings
@import "base/_variables";
@import "base/_mixins";

// Modules
@import "modules/_navbar";
@import "modules/_footer";

The resulting style.css file would contain all of the modules listed in the style.scss file in the order that they were imported. This means that you should make sure that the modules are imported in the appropriate order.

Resources

Documentation for Sass can be found at https://sass-lang.com/documentation.

Another good resource is http://thesassway.com/.