All geek questions in one place

Assign less variable based function

I am trying to develop a "theme engine" in LESS CSS so that clients can update the color scheme for their site with the least number of variables. Currently, we have a variable file in which we assign the default set and reduce the number of user inputs, we use the lighten and darken functions, for example,

// snippet 1 @grayLight: #999999; @grayLighter: darken(@grayLight, 10%);

Is there a way that lighten / darken functions can be assigned as a variable? Thus, we only need to indicate the contrast of the tone (dark / light or light / dark):

 // snippet 2 (does not work) @contrastVerb: darken; @linkColorHover: @contrastVerb(@linkColor, 10%);//#FFA500;

I tried using Javascript brackets to call a function request, for example.

 // snippet 3 (does not work) @linkColorHover: `window[@contrastVerb]`(@linkColor, 10%);//#FFA500;

An option is pattern matching:

 // snippet 4 @tone: light; .linkColor(light, @color){ color: lighten(@color, 10%); } .linkColor(dark, @color){ color: darken(@color, 10%); } .linkColor(@tone, #f17900);

However, snippet 4 will be more detailed than snippets 2 or 3, and will lead to the creation of a large amount of additional code.

Thanks in advance!

+4
source share
2 answers

I have a similar situation with user-created themes, and I came up with the following LESS mixin to help me manage color schemes created from several base colors:

 //LESS 1.3.3 .color (@color, @amount: 100) { color: contrast(@color, darken(@color, lightness(@color) * (@amount / 100)), lighten(@color, (100 - lightness(@color)) * (@amount / 100)), 0.5); }

The above code was written for LESS 1.3.3, which has a different contrast function for the version of LESS that I usually use in Sublime Text 2! If this does not produce the expected result, try:

 .color (@color, @amount: 100) { color: contrast(@color, lighten(@color, (100 - lightness(@color)) * (@amount / 100)), darken(@color, lightness(@color) * (@amount / 100)), 50%); }

This mixin works by creating a contrasting color based on the input color and the amount from 0 to 100 inclusive. 100 = full contrast (i.e. Black or White); 0 = no contrast (i.e. input color). For instance.

LESS

 @c: #4f2634; .c0 {.color(@c, 0)} .c20 {.color(@c, 20)} .c50 {.color(@c, 50)} .c80 {.color(@c, 80)} .c100 {.color(@c, 100)}

CSS

 .c0 {color: #4f2634;} .c20 {color: #844057;} .c50 {color: #bf7a92;} .c80 {color: #e5cad3;} .c100 {color: #ffffff;}

This example obviously generates the color of the text, so it is useful for a given background color, but the same idea can be redefined for border colors, etc. Hope this helps.

+2
source

Try adding a class to <body> and create css rules (with mixin) to change anything on the site.

 <body class="section1"></body>

LESS Demonstration :

 .color-mixin (@color) { color: @color; .foo{ background-color: darken(@color, 10%); } a { &:hover{ background-color: lighten(@color, 30%); } } } .section1 { .color-mixin(red); } .section2 { .color-mixin(blue); }

CSS result :

 .section1 { color: #ff0000; } .section1 .foo { background-color: #cc0000; } .section1 a:hover { background-color: #ff9999; } .section2 { color: #0000ff; } .section2 .foo { background-color: #0000cc; } .section2 a:hover { background-color: #9999ff; }​
0
source

Source: https://habr.com/ru/post/1434034/

More articles:


All Articles