Save multiple lines of css in a less variable - css

Question

I was wondering if it would be possible to do something of the sort:
#{basic-border} {
border: 2px solid lightgrey;
background-color: white;
border-radius: 4px;
}
.border-area {
&__top {
#{basic-border};
height: 60px;
margin-bottom: 8px;
}
&__main-info {
#{basic-border};
padding: 10px;
}
}
I know its relative nonsense, but I want to avoid writing the border params over and over and I couldn't really find specifics about it in the less docs. I tried :extend but I don't think I really grasp the idea yet :/
this is to make:
.border-area__top {
border: 2px solid lightgrey;
background-color: white;
border-radius: 4px;
height: 60px;
margin-bottom: 8px;
}
.border-area__main-info {
border: 2px solid lightgrey;
background-color: white;
border-radius: 4px;
padding: 10px;
}
any advice?

Answer 1

What you're looking for is called a mixin. Mixins are defined like regular styles but can also have params in them. Here's the docs on mixins. In your case you'll want to do something like this:
.basic-border() {
border: 2px solid lightgrey;
background-color: white;
border-radius: 4px;
}
.border-area {
&__top {
.basic-border;
height: 60px;
margin-bottom: 8px;
}
&__main-info {
.basic-border;
padding: 10px;
}
}