Sass Color Variables

Sass color variables in Sass

• Colors belong largely to the "base" category of styles

• All color variables should be defined in a dedicated color partial, e.g. app/assets/stylesheets/base/_colors.sass.

• In the first part of the color partial you define all the colors your are using with literal variable names describing the actual colors, so people know what they are dealing with without needing to know the HEX value for example.

Example top part of color partial:

// ---- USED COLORS ----

$black: #000
$white: white

$red: rgba(0, 0, 0, 1)
$green: 

• In the second part of the color you map the literal color variables to more "semantic" names that you will then use in your stylesheets. These names should indicate what purpose they serve in your frontends.

Example bottom part of color partial:

// ---- COLOR MAPPINGS ----

$light-text-color: $white
$dark-text-color: $black
$quiet-text-color: $greay

$border-color: $grey

$call-to-action-color: $shiny-red

$light-background-color: $beige
$medium-background-color: $grey

$primary-highlight-color: $highlight-yellow
$secondary-hightlight-color: $light-blue

It is totally fine to map one literal color to more than one semantic colors, just create as many different semantic colors as you need for your design. Just try not to go overboard and avoice going deeper than one level (Smurf only supports one level).