CSS Preprocessors

The Design System takes advantage of an automated build system which utilizes Sass.

What is a CSS Preprocessor

Cascading Style Sheets (CSS) control the majority of the visual elements within an application, and while the technology is fairly straight forward, keeping your styles organized and structured properly can be an arguous task. Preprocessors extend CSS with variables, operators, function, and mixins which allow for more programatic control and structure over your CSS. Some CSS preprocessors include Sass and LESS, and are generally paired with Gulp or Grunt to create an automated build process for Developers.

The Design System’s CSS Framework (fsa-style) utilizes Sass paired with a Grunt automated build process. Components and styles are structured in a modular and systematic format to allow for easy of integration into projects. This also allows for better code optimization, system maintenance, and feature updates.

CSS Preprocessor Code Snippet

Sass

.fsa-example {

  &__list {
    margin: 0 0 $size-small; // Sass variable
    padding: 0;
  }

  &__item {

    @include font-size(1); // Sass Custom Mixin
    margin: 0;
    display: inline-block;

    @include breakpoint(M) { // Mixin: at screens M and bigger apply these styles
      @include font-size(3); // Sass Custom Mixin
    }
  }
}

Compiled CSS

.fsa-example { }
.fsa-example__list {
  margin: 0 0 .8rem;
  padding: 0;
}
.fsa-example__item {
  font-size: 1.4rem;
  margin: 0;
  display: inline-block;
}
@media (min-width: 37.5em) {
  .fsa-example__item {
    font-size: 1.7rem;
  }
}

As seen in the above example, the ability to apply variables ($size-small) and custom mixins (font-size(1) and breakpoint(M)) across multiple projects and components allows for a cohesive design and an efficient development environment.

Related Information

• Sass
• LESS
• Grunt
• Gulp