[英]How can I simplify this CSS with SASS?
I have this CSS that I want to shorten as much as possible using sass. 我有这个CSS,我想使用sass尽可能地缩短。 Can I use extend/inheritance or nesting on any of these items? 我可以在任何这些项目上使用扩展/继承或嵌套吗?
Thanks! 谢谢!
.navbar-inverse .navbar-nav>li>a {
color: #fff;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a {
background-color: $activehoverblue;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
background-color: $activehoverblue;
}
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus {
background-color: $activehoverblue;
}
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>li>a:hover {
background-color: $hoverblue;
}
Try this, tho is scss, not sass: 试试看,这是ssss,而不是sass:
.navbar-inverse .navbar-nav {
li a {
color: #fff;
&:hover {
background-color: $hoverblue;
}
}
&.active a {
background-color: $activehoverblue;
&:focus, &:hover {
background-color: $activehoverblue;
}
}
&.open a {
background-color: $activehoverblue;
&:focus {
background-color: $activehoverblue;
}
&:hover {
background-color: $hoverblue;
}
}
}
Or you might want to give this a try: 或者您可能想尝试一下:
.navbar-inverse .navbar-nav {
li a {
color: #fff;
&:hover {
background-color: $hoverblue;
}
}
&.active a {
background-color: $activehoverblue;
&:focus, &:hover {
**background-color: currentColor;**
}
}
&.open a {
background-color: $activehoverblue;
&:focus {
background-color: currentColor;
}
&:hover {
background-color: $hoverblue;
}
}
}
This should work, you can reformat your CSS into SASS using this: http://css2sass.herokuapp.com/ 这应该可以工作,您可以使用以下方法将CSS重新格式化为SASS: http : //css2sass.herokuapp.com/
.navbar-inverse .navbar-nav >
li > a
color: #fff
.active > a, .open > a
background-color: $activehoverblue
.active > a
background-color: $activehoverblue
&:focus, &:hover
background-color: $activehoverblue
.open > a
background-color: $activehoverblue
&:focus
background-color: $activehoverblue
&:hover
background-color: $hoverblue
li > a:hover
background-color: $hoverblue
Or this: http://beautifytools.com/css-to-scss-converter.php 或这样: http : //beautifytools.com/css-to-scss-converter.php
.navbar-inverse {
.navbar-nav {
>li {
>a {
color: #fff;
&:hover {
background-color: $hoverblue;
}
}
}
>.active {
>a {
background-color: $activehoverblue;
background-color: $activehoverblue;
&:focus {
background-color: $activehoverblue;
}
&:hover {
background-color: $activehoverblue;
}
}
}
>.open {
>a {
background-color: $activehoverblue;
background-color: $activehoverblue;
&:focus {
background-color: $activehoverblue;
}
&:hover {
background-color: $hoverblue;
}
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.