How do I assign variables in one statement? - css

Question

I am using CSS Less for my project, I have a problem to write the following CSS into Less.
Here color is same for .btn and .header but how can I simplify using Less?
variable
#whiteColor: #fff;
CSS
.btn{
border: none;
color: #ffffff;
}
.header{
color:#fff;
}
I have written in the following way. Is there any way to write it in only one statement?
.btn{
border: none;
color: #whiteColor;
}
.header{
background:#whiteColor;
}

Answer 1

Assuming that the property to which the value needs to be assigned is the same (color), you can do it using a single statement by grouping selectors. Below is a sample snippet:
#whiteColor: #fff;
.btn{
border: none;
}
.btn,
.header{ /* selector grouping */
color: #whiteColor;
}
Note that you don't even need Less for the above if the color is not going to change often. I would assume this is the case because of how closely the variable name is coupled to the color and in that case you can use pure CSS like in the below snippet.
.btn {
border: none;
}
.btn,
.header { /* selector grouping */
color: #fff;
}
/* Just for demo */
body {
background: black;
}
<div class='btn'>Some button</div>
<div class='header'>Some header</div>
If the properties are different (one has white as its color while the other has it as background), then it cannot be simplified into a single line even while using Less.
You can use a parametric mixin and property name interpolation like in the below snippets but these only complicate the situation than simplify it.
/* If color is same but property is different */
#whiteColor: #fff;
.apply-white-color(#property){
&{
#{property}: #whiteColor;
}
}
.btn{
border: none;
.apply-white-color(color); /* the property to which white color should applied is passed as parameter */
}
.header{
.apply-white-color(background);
}
/* If property is same but color is different */
#whiteColor: #fff;
#redColor: #f00;
.apply-color(#value){
&{
color: #value;
}
}
.btn{
border: none;
.apply-color(#whiteColor); /* the color which should applied is passed as parameter */
}
.header{
.apply-color(#redColor);
}