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.
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;
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.