在以下场景中将 CSS 转换为 LESS CSS 时遇到问题。
在下面的 CSS 中,我为 :hover
和 .active
类设置了相同的属性。
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}
这里是如何在 &:hover
的 li.active
中使用 mixins
更少的 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 */
}
}
}
}
谢谢
最佳答案
在你的情况下不需要使用 mixins,就像你使用常规 CSS 一样:
&:hover,
&.active{
background-color:#fff;
border:1px solid #d0d0d0;
border-right:none;
border-bottom:1px solid transparent;
margin-right:-1px;
}
如果你真的想使用 mixin,你需要定义一个 mixin,而不是使用 CSS 声明:
/* 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();
}
}
}
}
关于css - Mixin 场景,尝试转换 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25016629/