7 Tips That Will Help You Get The Best Out Of Sass

7 Tips That Will Help You Get The Best Out Of Sass

Take your CSS to the next level
Ferenc Almasi • 🔄 2021 November 11 • 📖 7 min read

Sass has been with us for ages. It first appear in 2006–13 years ago — and since then, it has come a long way. It put CSS on superpowers and pushed the way towards the next generation of CSS features.

Pre-processors introduced a new set of features to CSS by introducing a new syntax that compiles down to CSS.

According to the 2019 State of CSS survey, it still ranks as the number one preprocessor in awareness and interest.

Today, we will explore, how Sass remained strong, despite CSS starting to catch up a decade later. But before jumping in, let’s clarify an important thing that often causes confusion. What’s the difference between Sass and SCSS?

Sass vs SCSS

Originally, Sass used a .sass extension. It supports all the same features as .scss, except you use indentation — and no semicolons — as opposed to curly braces. Because of it’s similarity to .css, the .scss version became the most popular.

The difference between scss and sass
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

1. Nesting Selectors

One of Sass powers comes from the ability of nesting selectors. In CSS, you don’t have the option to organize your selectors into a tree structure. Everything is flat. This makes it hard to read large CSS files and differentiate which element belongs to which parent. Sass lets you nest these selectors into each other. The following example is the same set of CSS. One of them is nested, the other is not.

nesting vs not in Sass
Sass will produce the same set of CSS rules on the right

Although you should try to avoid deeply nested selectors at all costs, it is sometimes not feasible. You have a more clear view of what is happening when your selectors are nested.

You also have the ability to easily:

  • define styles for different states, pseudo-elements using the &:<state> syntax.
  • or even target the same element with a different parent, using the <selector> & { ... } syntax.
selecting pseudo classes in Sass

2. Modularize

While nesting helps a lot in modularizing your CSS files, Sass also has the ability to break down CSS files into smaller chunks and include them into each other. This can be done using the following syntax:

importing CSS files into each other
You also have the ability to use // for single-line comments in .scss files

Sass will generate one single CSS file from this, which results in one network request. This means you can break your styles into as many pieces as you want. It also makes it easier to separate the styles of different components from each other.

To mark Sass files as partial — files that should be imported in other .scss files — you can name your files with an underscore in front of them. For example _config.scss.

Note that Sass discourages the continue use of @import. The rule will be phased out in the next few years and will be gradually removed. Prefer to use @use instead.
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

3. Using Variables

Sass also has the option to use variables. But pure CSS also has this option too. With the use of the var() function, you can start using variables right inside your .css files without the use of any pre-processor. As of writing this article, the global support sits around 94%.

The global support of CSS variables

This means that if you need to cater to IE and older browsers, you’re still better of using variables through Sass. This can be done quite simply by assigning a value to a name that begins with a dollar sign.

$colour-white: #FAFAFA;
$colour-pure-white: #FFF;
$colour-off-white: #E8E8E8;
$colour-white-alpha-1: rgba(250, 250, 250, 0.1);
$colour-white-alpha-05: rgba(250, 250, 250, 0.05);
$colour-black: #212121;
_color-palette.scss
Copied to clipboard!

This makes it convenient for you to define your color scheme in one place, use predefined typography values or even variables for spacing. This way, you have more control over the design and you can enforce rules to create consistency. You can use these variables throughout your project, by referencing the name of the variable.

.dashboard {
    background: $colour-black;
}
dashboard.scss
Copied to clipboard!

4. Configure Your Project

By modularizing files and using variables, you also have the option to create style configs for your projects. You can collect configuration options in one place, so they can easily be changed later on.

@import 'colour-palette';
@import 'typography';
@import 'mixins';

// Spacing
$gap-05: 5px;
$gap-10: 10px;
$gap-15: 15px;
$gap-20: 20px;
$gap-25: 25px;

// Border radius
$small: 2px;
$medium: 4px;
$large: 6px;
.config.scss
Copied to clipboard!

This also means that if you have design changes, you only need to change one value instead of going through hundreds of files.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

5. Using At-Rules

You’ve already seen the use of @import. This is called an at-rule. Apart from @import, Sass has other rules that add extra functionality to CSS. One which will be one of your best friends is the @mixin and @include rules.

It lets you define styles that can be re-used throughout your stylesheets.

@mixin button-large {
    background: green;
    padding: 10px 20px;
    box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15);
}

.submit-button {
    @include button-large;
}
mixins.scss
Copied to clipboard!

You define a set of rules with the @mixin rule, which can be later on included anywhere where it’s needed using the @include rule.

You can also create more complex, variable mixins, by adding parameters and some logic to them:

@mixin border-radius($radius: 'small', $position: null) {
    $borderRadius: map-get((
        none: 0,
        small: 2px,
        medium: 4px,
        large: 6px
    ), $radius);

    @if ($position) {
        $side: map.get((
            top:    ('top-left', 'top-right'),
            bottom: ('bottom-left', 'bottom-right'),
            left:   ('top-left', 'bottom-left'),
            right:  ('top-right', 'bottom-right')
        ), $position);

        @each $key in $side {
            border-#{$key}-radius: $borderRadius;
        }
    } @else {
        border-radius: $borderRadius;
    }
}

// Later on...
.card {
    @include border-radius('large', 'top');
    
    .button {
        @include border-radius('medium');
    }
}

// This will generate:
.card {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.card .button {
    border-radius: 4px;
}
mixins.scss
Copied to clipboard!

For example, the above mixin can be used to dynamically generate border-radius. It expects two arguments: the size of the radius and its position. As you can see, you can also have different logical statements such as @if or @each.

Sass also supports the use of interpolation. This lets you embed results of a Sass expression into anywhere using the #{...} syntax.

@mixin get-icon($name) {
    background-image: url('icons/#{$name}.svg');
}
mixins.scss
Copied to clipboard!

6. Maps and Lists

You’ve probably also noticed the use of map.get in the previous code example. This is a built-in function that lets you get values from a map. A map can hold a list of key-value pairs in Sass.

$themes: (
    light: (
        colour-background: #FAFAFA
    ),
    dark: (
        colour-background: #222
    )
);
_color-palette.scss
Copied to clipboard!

This lets you dynamically get values, to for example theme your application. Sass also supports the use of Lists. Similar to maps, a list can hold a list of values. The most common use-case is to generate similar styles, based on different values.

$icons: 'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down';

@each $icon in $icons {
    .icon-#{$icon} {
      background: url('icons/#{$icon}.svg');;
    }
}
lists.scss
Copied to clipboard!
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

7. Using Built-in Modules

There are a handful of other built-in modules for Sass that provides many useful functions, from manipulating colors, to even do math calculations. To use them, you have to import the module at the top of your files with @use <module-name>.

@use 'sass:color';

.color {
    background: color.scale(#000, $lightness: 20%);
    background: color.adjust(#000, $red: 15);
    background: color.adjust(#036, $hue: 30deg);
}
colors.scss
Copied to clipboard!

Summary

Sass is a powerful tool that helps you enhance the workflow of your CSS. Although CSS has come a long way, it still continues to be a powerful extension. It lets you build more scalable and manageable stylesheets, while also making way for more consistent designs by enforcing the use of predefined values.

What are your favorite parts of Sass? Let us know in the comments. Thank you for taking the time to read this article, happy styling!

Did you find this page helpful?
📚 More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundred of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended