SASS and LESS Tips and Tricks

One could completely ignore the features of LESS, write a .css file as normal but give it a .scss or .less extension, and it would work just fine. If not using the features of one of these languages, a .css extension could be used.

Titania Delivery takes care of compiling .scss, .sass, or .less to .css behind the scenes. To include a pre-compiled stylesheet in a page, use the following:

<link rel="stylesheet" href="<@harp.themeFileUrl value="/path/to/file.scss" />"></link>

In both SASS and LESS, one stylesheet can be imported into another by using the @import directive. This helps to keep styles modular and more organized. To import one stylesheet into another, use:

@import "path/to/file.scss";

SASS and LESS support the use of variables, which help prevent copying and pasting colors, font sizes, and other frequently-reused items.

SASS Variables

@name: value;

Variables are referenced via the syntax $name. For example:

color: $brand-primary;

LESS Variables

@name: value;

Variables are referenced via the syntax @name. For example:

color: @brand-primary;

Both SASS and LESS support nesting of rules to avoid long strings of selectors. If we have the following in CSS:

#container {
  color: blue; 
}
#container h1 {
  margin: 0;
}

#container {
  color: blue;
  h1 {
    margin: 0;
  }
}

1. View source on the page and find the reference to the LESS stylesheet.
2. Access that URL in your browser.

/*
NameError: variable @harp-primar is undefined in /temp/tmp4943953957435847557less.tmp on line 6795, column 12:
6794     font-family: @headings-font-family;
6795     color: @harp-primar !important;
6796 }

*/