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

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.

Remove ads

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

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:

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.

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.


5. Using At-Rules

You’ve already seen the use of @import. This is called an at-rule. Apart from @importSass 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!

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!

Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.