[英]How can I simplify this CSS with SASS?
我有这个CSS,我想使用sass尽可能地缩短。 我可以在任何这些项目上使用扩展/继承或嵌套吗?
谢谢!
.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;
}
试试看,这是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;
}
}
}
或者您可能想尝试一下:
.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;
}
}
}
这应该可以工作,您可以使用以下方法将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
或这样: 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.