Sass in the Real World: book 1 of 4

Using a _config.scss file

When working with variables, creating _config.scss files are definitely considered best practice. Typically in projects I will have a _config.scss file at the root of the Sass directory and it's not entirely uncommon to have one in close relation to a module UI if the complexity requires such a tool.

Looking back at File Management, specifically the Configurable theme option section, we talk about this in the context of a project for use with theming, but _config.scss files go way past simple theming. Consider _config.scss files as the operations center of your UI architecture.

Root _config.scss file

The following is an example _config.scss file that would appear at the root of the Sass directory. A collection of variables that are made available to the Sass at the time of processing.

// URL variable
$base-img-url: '/images';

// Primary colors
$blue:                  #3481CF;
$white:                 #FFFFFF;
$black:                 #000000;
$gray:                  #7F7F7F;

// Derivative colors
$dark-gray:             darken($gray, 23.14%); //#444
$darker-gray:           darken($dark-gray, 6.6667%); //#333
$darkest-gray:          darken($dark-gray, 17.25%); //#181818

// Color palette
$primary-color: $blue;
$secondary-color: $black;
$tertiary-color: $white;

// Font information
$header-font-family: "Georgia", "Times New Roman", serif;
$default-font-family: "HelveticaNeue", "Helvetica Neue", Helvetica,
Arial, sans-serif;
$default-browser-size: 16;
$default-font-size: 14px;
$font-color:    $darker-gray;
$anchor-color: $darker-gray;

// Z-index variable
$starting-zindex: 1000;
$zindex-modal-backdrop: $starting-zindex * 3;
$zindex-modal: $zindex-modal-backdrop + 1;

// Responsive
$small-screen-min-width: 320px;
$small-screen-max-width: 568px;
$medium-screen-min-width: 768px;
$medium-screen-max-width: 1024px;
$large-screen-min-width: 1824px;

Local _config.scss file

Another example would be a _config.scss file that would be local to a module, as in this example, a Button mixin.

// Default values - edit in `_config.scss` file
// -----------------------------------------------------------
$button-color:  $button-color !default;
$button-text-color: $white !default;
$button-line-height: 32 !default;
$button-border-radius: 3 !default;
$button-padding: 20 !default;
$button-font-size: 18 !default;
$button-weight: bold !default;
$button-text-shadow: true !default;
$button-box-shadow: true !default;

Notice the use of the !default flag. This process of defining defaults in a _config.scss that would probably appear in the same directory as the button mixins themselves allows for defaults to be set, but are easily over-written in the primary root _config.scss file.

For more about !default functionality, please read The !default and !global flags.