No component level variables

_colors.scss

/*------------------------------------*\
    #COLORS
\*------------------------------------*/

/**
 * Color Variables
 *
 * These variables should always be aliased as Functional Variables, either at
 * the bottom of this file, or at the top of the Component SCSS that they
 * belong to. This method helps aid the quick reskinning of Components.
 */

$blue:                              #3366cc !default;
$yellow:                            #fdcc5d !default;
$red:                               #ee283b !default;






/**
 * Global Functional Color Variables
 */

$font-color:                        $very-dark-gray !default;
$link-color:                        $bright-red !default;






/**
 * Branding Color Variables
 */

 $brand-color-1:                    $blue !default;
 $brand-color-2:                    $yellow !default;
 $brand-color-3:                    $red !default;

_component_1.scss

/*------------------------------------*\
    #COMPONENT-1
\*------------------------------------*/

.component-1 {
    color: $brand-color-2;
    background: $brand-color-1;
}

    .component-1__element {
        border: 1px solid $brand-color-3;
    }