Less mixins do not inherit classes - css

Question

I'm new with Less.js, I need to reuse the p.InputTitle like my examples, but it is not working for me :( it is giving me an error. I read more about mixins and some people tell me that I can use 'Extend'. What is that?
Here My code :
.LoginForm {
p.InputTitle {
color: #656565;
font-size: 14px;
font-family: #OpenSans;
font-weight: 600;
}
}
.Membership{
p.InputTitle {
.LoginForm p.InputTitle;
}
}

Answer 1

Use Less extend pseudo class:
.Membership{
p.InputTitle {
&:extend(.LoginForm p.InputTitle);
}
}
This will then produce:
.LoginForm p.InputTitle,
.Membership p.InputTitle {
color: #656565;
font-size: 14px;
font-weight: 600;
}
Your syntax is calling in the form of a mixin call and a mixin name cannot be p.InputTitle.
If you were to change your original LoginForm CSS to the following then this would act as a valid mixin:
.LoginForm {
.InputTitle {
color: #656565;
font-size: 14px;
font-weight: 600;
}
}
You could then write:
.Membership{
p.InputTitle {
.LoginForm .InputTitle;
}
}
However this would then produce double the amount of CSS styles:
.LoginForm .InputTitle {
color: #656565;
font-size: 14px;
font-weight: 600;
}
.Membership p.InputTitle {
color: #656565;
font-size: 14px;
font-weight: 600;
}