Can I use inherited values in Less? - css

Question

I have a class .card which includes a lot of absolute positioned elements.
.card {
height: 400px;
width: 200px;
.name {
position:absolute;
left: 34px;
}
}
Now I want to create easily many different sizes for .card
Like
.card.xs {
.createSizedCard(0.5);
}
.createSizedCard(#factor){
height: 400px * factor;
width: 200px * #factor;
// etc
}
So. This was obviously just an example, my actual CSS includes way more classes. The question is: can I use something like #inherited in my .createSizedCard mixin instead of have to declare my values a second time?
I know I could use variables, but I would like to avoid that.
Or alternatively: can I use a concrete value from another class? Like
height: .card[height] * #factor;

Answer 1

No, you cannot inherit the property values from another class and use it. But you can set the default properties (and their calculation logic) of the .card class to a ruleset or mixin like in below snippets and call it. The same can be done using a wrapper mixin also.
Here is the ruleset version where the height, width and factor are set within the caller's scope before calling the ruleset.
#card: {
height: #height * #factor;
width: #width * #factor;
};
.card{
#factor: 1;
#height: 400px;
#width: 200px;
#card();
&.xs{
#factor: 0.5;
#card();
}
&.lg{
#factor: 2;
#card();
}
}
Below is a mixin version of how it can be done. It is very similar to the ruleset version except that it can take an input parameter directly.
.card(#factor) {
height: #height * #factor;
width: #width * #factor;
};
.card{
#height: 400px;
#width: 200px;
.card(1);
&.xs{
.card(0.5);
}
&.lg{
.card(2);
}
}
The above when compiled would result in the below CSS:
.card {
height: 400px;
width: 200px;
}
.card.xs {
height: 200px;
width: 100px;
}
.card.lg {
height: 800px;
width: 400px;
}
Alternately, if the factor is constant and all card elements would need rules for all sizes then you could create a mixin like the below:
.generate-card(#height; #width) {
height: #height;
width: #width;
&.xs{
height: #height * 0.5;
width: #width * 0.5;
}
&.lg{
height: #height * 2;
width: #width * 2;
}
}
.card {
.generate-card(400px; 200px);
}
.card-2 {
.generate-card(450px; 150px);
}