To provide some background, I am utilizing bootstrap nav pills as triggers for bootstrap collapsibles.
This is a simplified representation of the LESS code for bootstraps nav pills:
.nav-pills {
> li {
// Active state
&.active > a {
&,
&:hover,
&:focus {
color: @nav-pills-active-link-hover-color;
background-color: @nav-pills-active-link-hover-bg;
}
}
}
}
When a collapsible is collapsed, it appends a collapsed class to the trigger (the .nav-pills > li element in this scenario). My goal is to simply add the .active class to the nav pill when it does not have the .collapsed class.
I attempted the following approaches:
:not(.collapsed) { .active; }
:not(.collapsed) { &:extend(.active); }
:not(.collapsed) { &:extend(.active all); }
Unfortunately, none of them produced the desired outcome. The first one did not even compile.
Is there a way to achieve this?