Built by Sanctuary Computer
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

    Color

    color(‘<color>’)

    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.