With component level vars

_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 !default;
$component-1-background-color:      $brand-color-1 !default;
$component-1-element-border-color:  $brand-color-3 !default;

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

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