UX Design and Development course

Configurable theme option

An advanced concept of using a Sass structure like this is using a _config.scss file to manage the smart defaults for your UI. Using this technique will help to keep all your UI configuration options easily accessible and manageable, especially when you are using extended Sass libraries like Zurb's Foundation or Toadstool w/Stipe.

// We use these as default colors throughout
$primary-color: #008CBA;
$secondary-color: #e7e7e7;
$alert-color: #f04124;
$success-color: #43AC6A;
$warning-color: #f08a24;
$info-color: #a0d3e8;

// We use these to make sure border radius matches.
$global-radius: 3px;
$global-rounded: 1000px;

// We use these to control inset shadow shiny edges and depressions.
$shiny-edge-size: 0 1px 0;
$shiny-edge-color: rgba(#fff, .5);
$shiny-edge-active-color: rgba(#000, .2);

It is important that there are no presentational CSS rules in the _config.scss file. Typically you will include it at the head of your primary Sass manifest file, such as application.scss. Depending on how your architecture progresses, there may be times when you need to import your _config.scss file again in another module. As long as you keep any CSS rules out of this document, there is nothing wrong with this practice.