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.
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;
}