Group 19 Created with Sketch.
  • Motivation

    SASS Utilities

    While Basement aims to provide as many composable classes as possible, we recognize that sometimes you’ll have to dive into a .scss file and get messy.

    That being said, we still wanted the developer to be able reuse the settings they’ve already defined for the Basement framework. We’ve exposed a number of utility functions that can be used in your .scss files to conveniently use these settings.

  • Utilities



    Returns a color value from the $colors setting map.

              color(‘blue’); /* returns #343CCC */
  • Mixins

    Media Queries

    @include media(<query>-<direction>)

    Generates a media query closure for the given breakpoint and direction.

              @include media(‘lg-down’) {
      position: absolute;
    /* transpiles to @media (max-width: 868px) */

    Note: The up direction, will generate a media query for all screen widths from the given breakpoint and up. The down direction will generate a media query for all screen sizes from the next defined breakpoint and down. Because of this, the last defined breakpoint will not have a down direction.