Skip to main content Skip to main navigation

Sass

Added

Updated

Zachary Winnie , Senior Interface Designer

Variables

Declaring variables is easy. Note: Think about abstracting variables into other variables if they are going to blue used extensively, like with colors.

$mercury-blue: #0d5cab;
$primary-color: $mercury-blue;

Mixins

Declaring mixins:

@mixin background-color($color) {
    background-color: $color;
}

Using mixins:

@include background-color($primary-color);

You can also use @content to simply pass through content.

@mixin for-xxs-up {
    @media (min-width: $xxs) {
        @content;
    }
}

And to use @content:

@include for-xxs-up {
    background-color: $primary-color;
}

Nesting

Keep nesting to one or two levels to keep code readable and maintainable:

.button {
    background-color: $primary-color;
    // renders as .button:hover {}
    &:hover {
        background-color: $primary-color--dark;
    }
    // renders as .button-group .button {}
    .button-group & {
        border-radius: 0;
    }
}

Colors

Common ways to change a color:

$primary-color--dark: darken($primary-color, 5%);
$primary-color--light: lighten($primary-color, 5%);
$primary-color--bright: saturate($primary-color, 5%);
$primary-color--muted: desaturate($primary-color, 5%);
$primary-color--transparent: rgba($primary-color, .5);

Math

Math operations act like you’d expect:

$spacer: 15px;
$padding--medium: $spacer;
$padding--large: $spacer*2; // 30px
$padding--small: $spacer/2; // 7.5px
$padding--smaller: floor($spacer/2); // 7px
$padding--small: ceil($spacer/2); // 8px
$padding--larger: $spacer + $spacer + $spacer; // 45px

Loops

For loops:

$columns: 12;
@for $i from 1 through $columns {
    .column--#{$i} {
        width: percentage($i / $columns);
    }
}

Conditionals

Sass has if/else statements:

$border-radius: false;
@if $border-radius == true {
    border-radius: 4px;
}
@else  {
    border-radius: 0;
}

Maps

Store key value information using a map:

$colors: (
    $primary-color: #0d5cab,
    $secondary-color: #72c267
);

Retrieve values from a map:

map-get($colors, $primary-color);

Mixin Libraries

Resources

Table Of Contents
Handbook Overview Culture Code Style Code Tools UX Design UI Design Front End Development Favicons Fonts JavaScript Frameworks Designs Systems Color Meta Accessibility Safari iOS HTML Internet Explorer Browser Support CSS Gulp React Images SVG Video Performance Sass Knockout.js Icon Fonts Back End Development .NET Reading Coding Practices CMS SharePoint SharePoint SPFX API Theming Native Mobile DevOps Testing Functional Tests Scum Client Relationships Job Descriptions Professional Development