I've got a problem when i am converting CSS to LESS CSS in the below Scenario.
In the below CSS i have same properties for :hover
and .active
classes.
CSS:
.sideNav ul li:hover,
.sideNav ul li.active {background-color:#fff;border:1px solid #d0d0d0;border-right:none;border-bottom:1px solid transparent;margin-right:-1px}
Here how to use mixins in li.active
from &:hover
LESS CSS:
.sideNav{
width:201px;
margin-bottom:50px;
float:@left;
position:fixed;
ul{
margin-top:-1px;
li{
padding:10px 5px 10px 6px;
margin:0 0 0 6px;
border:1px solid transparent;
border-right:none;
cursor:pointer;
border-top:1px solid #d0d0d0;
overflow:hidden;
&:hover{
background-color:#fff;
border:1px solid #d0d0d0;
border-right:none;
border-bottom:1px solid transparent;
margin-right:-1px;
}
li.active{
/* How to call "&:hover" mixin here */
}
}
}
}
Thanks
No need to use mixins in your case, just do the same as you would with regular CSS:
&:hover,
&.active{
background-color:#fff;
border:1px solid #d0d0d0;
border-right:none;
border-bottom:1px solid transparent;
margin-right:-1px;
}
If you really want to use a mixin, you will need to define a mixin, not use a CSS declaration:
/* Mixin definition, notice the () */
.myhover() {
background-color:#fff;
border:1px solid #d0d0d0;
border-right:none;
border-bottom:1px solid transparent;
margin-right:-1px;
}
.sideNav{
width:201px;
margin-bottom:50px;
float:@left;
position:fixed;
ul{
margin-top:-1px;
li{
padding:10px 5px 10px 6px;
margin:0 0 0 6px;
border:1px solid transparent;
border-right:none;
cursor:pointer;
border-top:1px solid #d0d0d0;
overflow:hidden;
&:hover{
/* Call the mixin */
.myhover();
}
&.active{
.myhover();
}
}
}
}