Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Naming Color Variables in SASS

Tags:

sass

When creating a color scheme in SASS what's the conventional variable names for defining colors?

I know using color names are bad. Such as:

$blue
$red
$green

But I've not seen an alternative. I'm struggling for variable names for colors on the site that convey meaning.

Any ideas?

like image 341
James Jeffery Avatar asked May 28 '13 13:05

James Jeffery


1 Answers

I found another idea in "SASS & Color Variables" article. The solution suggested by Sacha Greif is to use 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'm just beginning with SASS and don't know which approach is more practical, but I like the way it separates colors from their function.

like image 66
Paweł Bulwan Avatar answered Oct 08 '22 15:10

Paweł Bulwan