SASS Best Practices: 9 frontend tips for CSS preprocessors

Introduction to SASS#

As mentioned above, SASS is a CSS Preprocessor. CSS Preprocessors came about as a result of web pages becoming more and more complex as their CSS grew to hundreds of lines of code. To help prevent bugs in stylesheets and to make writing CSS simpler, SASS was created. SASS extends what CSS already gives us and then allows us the use of functions, variables, nesting and other SASS tools to make writing styles easier.

To install SASS, you can use your preferred package manager to install it globally:

//yarn
yarn global add sass
//npm
npm install -g sass

This installs a JS implementation of SASS. According to documentation, this may run slower than other implementations (such as Ruby-Sass or Dart-Sass). If all else, you’ll be able to swap out implementations later if you need to up the performance speed.

Alright! We are ready to use SASS on our machine. To run a watch server so that the CSS changes every time you make a change in your Sass files, use the following syntax:

sass --watch <sass-input> <css-output>

The input and SASS output files are the relative paths to the file from the current directory you are in. To utilize a sass input directory and a css output directory:

sass --watch src/sass:src/css

The --watch flag allows for changes to automatically be compiled as you change your code.

SASS Architecture#

One of the things that makes preprocessing so useful is the ability to siphon your styling into separate files without having to compromise on performance. Here is an example of what the file structure might look like:

sass/
|
|-- utilities/
|       - _variables.scss
|       - _mixins.scss
|       - _extends.scss
|
|- reset/
|       - _reset.scss
|       - _typography.scss
|
|- components/
|       - _example0.scss
|       - _example1.scss
|       - _example2.scss
|
|- layout/
|       - _example0_layout.scss
|       - _example1_layout.scss
|       - _example2_layout.scss
|
|- pages/
|       - _home.scss
|       - _settings.scss
|       - _another_page.scss
|
|- third-party-css/
|       – _bootstrap.scss
|
- main.scss

Utilities concerns itself with the variables and styles that are used across the entire application. The reset folder is where you would be your version of a CSS Reset and define anything that concerns the font of your webpage.

The components folder will have structural specific rules for buttons, carousels and other such elements. Each component should have its own file. The layout folder looks at the overall position on the page. This will be where you put definitions for your grid, your navbar, your footer, etc. The pages folder looks at each individual page’s style.

Typically, some sort of main .scss file is created in the root of the sass folder that all the other files are imported into. These files are listed in the order you would like the styling applied. The cascading nature of CSS still applies.

Variables in SASS#

Using variables in CSS is not necessarily anything new. We were already able to write custom properties for awhile to use them later in our stylesheets, but browser support for it wasn’t necessarily widespread. Using SASS takes out the guesswork and will compile all variables down to something that can be read by a browser engine.

This is typically how we are used to seeing a CSS variable:

:root {
  --main-color: #000000;
  --main-bg: #FAFAFA;
}
body {
  background: var(--main-bg);
  color: var(--main-color);
}

This is how it would look using SASS:

$main-color: #000000;
$main-bg: #FAFAFA;
body {
  background: $main-bg;
  color: $main-color;
}

SASS uses $ to indicate a variable instead of --. Instead of the var() syntax of CSS, SASS uses the same syntax as it did to assign the variable value. This works very well when we have a design system and want to keep colors, heading sizes and font-families consistent.

If there is ever a need to change the design system, you’ll only need to change it in your variables file instead of hunting to try to find every place you declared a color. This is why it is important to be sure to name your variables for their _function_ as opposed to a _description_.

If you name your variable _$purple_, for instance, it would only make sense that the color associated with that variable name would be purple. This takes away the purpose of what using variables in CSS or SASS means.

Instead of purple, let’s use _$main-bg_ and assign the value of _$main-bg_ to purple. This allows us to use a generic term for our variable in our stylesheets while leaving the variable declaration in one place so we can save time on changing it later if needed.

Using Interpolation#

An interpolation, coming from the Latin meaning “to polish between”, is simply an insertion to a string. One of its use cases is to make selector rules more dynamic. Say for instance you would like all of your icons to have a class name that is associated with the icon’s name.

We can do that easily in SASS with interpolation and mixins:

@mixin icon-name($name) {
  .icon-#{$name} {
      background-image: url("../images/#{$name}.png);
  }
}

This is only one instance of a use case of string interpolation in SASS. There are several more: comments, function names, imports, etc. This only touches the very tip of what you can do.

Extends in SASS#

The extend feature in SASS can be useful to keep your stylesheets DRY by allowing selectors to inherit properties.

The syntax is as follows:

%button-shared { // name of extend
  // CSS properties go here
}
//later in scss:
button {
  @extend %button-shared
}

You can add CSS properties that would be unique to a component. The extend will inherit the original properties and then you can add to it as you wish.

button.warning {
  border-color: red;
  color: red;
}

Mixins in SASS#

Mixins are very similar to the extend feature, but allow for parameters to be passed as well. The syntax is a bit different.

@mixin flexContainer($direction, $justify, $align) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}
.main-container {
  @include flexContainer(column, center, center);
}

Using mixins in SASS is an attempt to make our styling dynamic so we don’t have to repeat ourselves multiple times.

Imports and other at-rules#

The @import rule extends the CSS import feature and gives us the ability to bring in other SASS and CSS stylesheets to combine all of the styling into one file. SASS imports are handled during compilation unlike CSS imports - which are handled with an HTTP request.

According to the SASS documentation, however, the standard way of including an import in your main scss file will be going away within the next couple of years. This section will show both the way that is being phased out and the new way that SASS recommends to import files so you can compare the two.

// using @import
@import 'folder/name-of-file';
// using @use
@use 'folder/name-of-file';

As you can see, it’s essentially the same statement/ The at-rule is the only thing that changed. Most of the differences occur under the hood to improve how importing works. Most of the changes reflect an improvement on efficiency and performance.

Nesting in SASS#

Nesting is one of the most recognizable features of SASS. Unlike CSS, where every selector has its own block of CSS properties, SASS allows for nesting in the manner of an HTML document. It’s one of the biggest features of SASS that will really improve how DRY your code is.

Click on the tabs to compare how this code would look in CSS versus SASS.

Using SASS Modules#

Just like other programming languages, SASS has some modules you can use that have helper functions or properties in it. Some of the common SASS modules are:

• sass:color - a function that can lighten or darken a color
• sass:list - a function that can perform list/array methods
• sass:math - a bounding function and constants found in math (i.e. _pi_ and _e_)
• sass:string - a string method not too different from the standard string methods

To use these modules, import them just like you would any other file or module.

@use "sass:color";
button {
  color: color.lighten(#000000, 20%);
}

Getting started with a SASS project#

Here is a simple application using React-Bootstrap and SASS to show how to use some of the SASS features. To see it work, all you need to do is add your own API_KEY from TMDB to the .env file. Click on the CodeSandbox link below to get started.

What I would recommend is to either:

1. Take this application, fork it, and refactor without using React-Bootstrap. Use SASS for all of your styling.

2. Create your own application similar to this one, using SASS. Use the code provided to start.

Jumping straight in and using these new technologies is the best way to get a handle on them!

What to learn next#

Congrats! You’ve now learned 10 best practices and top tricks for using SASS. Your frontend skills are already advancing. Now that you know the top tips for building a SASS project, it’s time to move onto the more advanced SASS concepts. You’ll want to look into the following:

• Control directives
• Placeholders
• The SASS 7-1 pattern
• Creating build processes
• Setting up media queries in SASS
• Unit Testing and SASS True
• and more

To move onto these advanced concepts, check out Educative’s course Sass for CSS: Advanced Frontend Development to cover all these concepts, techniques, and more. By the end, you’ll have advanced knowledge of SASS. You’ll be able to migrate an existing CSS codebase, as well as set up an entire project (and build process) from scratch.

Happy learning!

Continue reading about frontend development#

• Sass Tutorial: Unit Testing with Sass True
• React Bootstrap Tutorial: upgrade React apps with a CSS framework
• Revamp Your Front-End Skills: hands-on with HTML5 and CSS3