How to create inheritance with LESS? - css

Question

I'm used to use SASS and I'm trying to do the same thing in LESS, painfully.
LESS:
.btn {
text-align: center;
test: 5px;
&:before {
.fa();
margin-right: 5px;
// Acts like a space,no need of extra html markup or javascript.;
}
&:after {
.fa();
margin-left: 5px;
// Acts like a space,no need of extra html markup or javascript.;
}
}
.btn_primary {
&:extend(.btn);
&:extend(.btn-primary);
.border-radius(4px);
margin: 0 auto;
color: #white;
font-weight: bold;
text-align: center;
padding: 0px 10px auto;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
&:hover {
color: #white;
text-decoration: none;
border: 1px solid #orange;
}
&.disabled {
border: 1px solid #orange;
}
}
Generated CSS:
.btn,
.btn_primary {
text-align: center;
test: 5px;
}
.btn:before {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 5px;
}
.btn:after {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-left: 5px;
}
Why don't I get the :before and :after in my .btn_primary class too? How can I fix this?

Answer 1

To extend the nested classes (:before and :after in this case), you need to use the all directive when extending like below:
&:extend(.btn all);
LESS Code: (Some extra lines commented to enable compilation)
.btn {
text-align: center;
test: 5px;
&:before {
//.fa();
margin-right: 5px;
// Acts like a space,no need of extra html markup or javascript.;
}
&:after {
//.fa();
margin-left: 5px;
// Acts like a space,no need of extra html markup or javascript.;
}
}
.btn_primary {
&:extend(.btn all);
&:extend(.btn-primary);
//.border-radius(4px);
margin: 0 auto;
color: #white;
font-weight: bold;
text-align: center;
padding: 0px 10px auto;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
&:hover {
color: #white;
text-decoration: none;
border: 1px solid #orange;
}
&.disabled {
border: 1px solid #orange;
}
}
#white: white;
#orange: orange;
Compiled CSS: (Only the relevant part)
.btn,
.btn_primary {
text-align: center;
test: 5px;
}
.btn:before,
.btn_primary:before {
margin-right: 5px;
}
.btn:after,
.btn_primary:after {
margin-left: 5px;
}
Note: extend feature was introduced only in LESS v1.4.0 and this works in all versions from there on.

Answer 2

You want to get this, isn't it ?
LESS :
.btn_primary {
.btn();
//...
}
CSS :
.btn_primary:before {
//...
}
.btn_primary:after {
//...
}