I have customized mixins for a red button.
For example:
.btnRed{
background:red;
color:white;
border-radius:3px;
min-width:200px;
font-size:18px;
}
I typically use this to style my main buttons, but for one specific button, I needed to override the min-width and font-size properties:
.class1{
.btnRed;
min-width:0;
font-size:25px;
}
Upon inspecting it in Firebug, I noticed that my added styles are being ignored as they are overridden by the original mixin:
.class1{
background:red;
color:white;
border-radius:3px;
min-width:200px;
font-size:18px
}
.class1{
min-width:0;
font-size:25px;
}
This brings up my question:
How can I combine the mixins with the newly added styles in the same ".class1" without having to declare !important?