preprocess

Set descriptive and functional variables

Looking around the Internet at various SASS use techniques, I came across an article by Sacha Greif titled “SASS & Color Variables” The article discusses using some variables to store descriptive color names, and some other to assign those colors to their functions:

 // first we set descriptive variables:
$darkgrey: #333333;
$blue: #001eff;
 
// then we set functional variables:
$text_color: $darkgrey;
$link_color: $lightblue;
$border_color: $lightblue;
 
.myClass{
  color: $text_color;
  border-color: $border_color;
}
a{
  color: $link_color;
}
 

I like the way this technique separates colors from function.

Read more about this technique at sachagreif.com