Menu

Introduction to Sass

Get started with Sass, our favourite CSS preprocessing language.

A. What is Sass?

Sass is an acronym that stands for "Syntactically Awesome Stylesheets".

Sass is a CSS preprocessing language. This means that you write your CSS with Sass in a manner that is more like programming. Then, your code is compiled to CSS for your website.

What are some of the reasons for you to write with Sass? Sass provides programmatic features that plain CSS does not have. Some of these features are:

Sass is incredibly powerful but also very easy to abuse. Be sure to author your stylesheets responsibly.

Best Practices: CSS and Sass To start with Sass, read our CSS and Sass Best Practices guide. The guide has advice that is specific to Adaptive.js projects.

B. Nesting

By nesting selectors, you avoid the repetition of selector prefixes.

Example:

.t-home {
    .c-button {
        padding: 10px;

        &:active {
            background-color: #cc0000;
        }
    }
    .c-heading {
        font-size: 18px;
    }
}

The above example compiles to the following CSS:

.t-home .c-button {
    padding: 10px;
}
.t-home .c-button:active {
    background-color: #cc0000;
}
.t-home .c-heading {
    font-size: 18px;
}

In Adaptive.js, we use nesting to scope styles to certain templates or components.

C. Variables

By defining variables, you can re-use common values.

Example:

$brand-color: #0000ff;

.t-product {
    .c-icon {
        background-color: $brand-color;
    }
    p {
        color: $brand-color;
    }
}

The above example compiles to the following CSS:

.t-product .c-icon {
    background-color: #0000ff;
}
.t-product p {
    background-color: #0000ff;
}

In Adaptive.js, we define variables in app/global/styles/vellum/_variables.scss.

D. Mixins

By defining mixins, you can apply a set of styles to your class definitions.

Example:

@mixin tap-highlight {
    -webkit-tap-highlight-color: transparent;

    &:active {
        background-color: $brand-color;
    }
}

.t-category {
    .c-button {
        @include tap-highlight;

        padding: 10px;
    }
}

The above example compiles to the following CSS:

.t-category .c-button {
    padding: 10px;
    -webkit-tap-highlight-color: transparent;
}
.t-category .c-buton {
    background-color: #0000ff;
}

In Adaptive.js, we define mixins in app/global/styles/_utilities.scss.

E. Resources

Learn more about Sass and master it!

Official Sass Documentation Read the official Sass documentation.

Sass Basics Learn about Sass in general in the Sass Basics summary.

Sass Functions View all the Sass functions in one convenient reference.

Edit in GitHub