Create a variable list in LESS for colors variants based on a base color

Question

In our project we use a LESS variables list. In this list we have multiple colors. For example this:

@color-gray: #B9B9BA;

@color-gray-light: lighten(@color-gray, 10%);
@color-gray-lighter: lighten(@color-gray, 20%);
@color-gray-lightest: lighten(@color-gray, 25%);
@color-gray-dark: darken(@color-gray, 10%);
@color-gray-darker: darken(@color-gray, 20%);
@color-gray-darkest: darken(@color-gray, 25%);

Besides this gray, we have other colors as well. So I would like to make a mixin that makes this list of variables for other colors.

The first color is defined. For example: @color-purple: #915E9F; and I want the mixing to create the remaining variables, solely based on this variable.

// Color - Purple    
@color-purple: #915E9F;

// Color variants generated by LESS for purple
@color-purple-light: lighten(@color-purple, 10%);
@color-purple-lighter: lighten(@color-purple, 20%);
@color-purple-lightest: lighten(@color-purple, 25%);
@color-purple-dark: darken(@color-purple, 10%);
@color-purple-darker: darken(@color-purple, 20%);
@color-purple-darkest: darken(@color-purple, 25%);

These variables will later be used all over the app to make up styling for buttons, headers, etc. I already have mixing that make these buttons, headers, variants.

Unfortunately dynamic variable names are not a part of LESS as far as I know. — Arathi Sreekumar
– Arathi Sreekumar, Commented Jun 22, 2016 at 9:31

score 1 · Accepted Answer · 2016-06-22 09:45:53Z

1

Is this you want to do?

@color-gray: #B9B9BA;


.colorset(@color) {
  @color-light: lighten(@color, 10%);
  @color-lighter: lighten(@color, 20%);
  @color-lightest: lighten(@color, 25%);
  @color-dark: darken(@color, 10%);
  @color-darker: darken(@color, 20%);
  @color-darkest: darken(@color, 25%);
}


.class{
  .colorset(@color-gray);
  color:@color-light;
}

Demo: http://codepen.io/blonfu/pen/ezBEje

edited Jun 22, 2016 at 9:45

answered Jun 22, 2016 at 9:37

user4994625

Sign up to request clarification or add additional context in comments.

1 Comment

Tommy Hoogeveen Over a year ago

This is slightly different than what I was thinking, but this would still work as I intended. Very awesome, thank you.

Arathi Sreekumar · Accepted Answer · 2016-06-22 09:44:20Z

0

As far as I know you cannot create dynamic variables in mixin. But if you are willing to rethink your logic, you can do something like this:

.color-light (@colorItem) {
  @color-light: lighten(@colorItem, 10%);
}
.color-lighter (@colorItem) {
  @color-lighter: lighten(@colorItem, 20%);
}
.color-lightest (@colorItem) {
  @color-lightest: lighten(@colorItem, 25%);
}
.color-dark (@colorItem) {
  @color-dark: darken(@colorItem, 10%);
}
.color-darker (@colorItem) {
  @color-darker: darken(@colorItem, 20%);
}
.color-darkest (@colorItem) {
  @color-darkest: darken(@colorItem, 25%);
}

.class{
  .color-light(@color-gray);
  color:@color-light;
}

answered Jun 22, 2016 at 9:44

Arathi Sreekumar

2,5841 gold badge19 silver badges29 bronze badges

1 Comment

Tommy Hoogeveen Over a year ago

That is pretty unfortunate. We are building a React app, and I want to keep most of the styling classes outside of the templates. It just means I'll have to define the variables list manually, it's ok. :-)

Collectives™ on Stack Overflow

Create a variable list in LESS for colors variants based on a base color

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related