Skip to content

Instantly share code, notes, and snippets.

@bberg11
Created November 21, 2016 17:22
Show Gist options
  • Save bberg11/ddcfff6980336a9b3d26489972b44885 to your computer and use it in GitHub Desktop.
Save bberg11/ddcfff6980336a9b3d26489972b44885 to your computer and use it in GitHub Desktop.
No component level variables
/*------------------------------------*\
#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
\*------------------------------------*/
.component-1 {
color: $brand-color-2;
background: $brand-color-1;
}
.component-1__element {
border: 1px solid $brand-color-3;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment