SASS-使代码更简洁
以下规则仅适用于#navmenu.someclass,因此此处不应影响#navmenu 我有两个特定的导航菜单,分别有“事件”和“事件类别”。共同的部分是‘ul’和‘li’,然后‘li a’不同。有没有办法合并下面两段sass代码,这样我就不必重复“ul”和“li”的规则。同样,navmenu不应受到影响,因为规则不适用于主navmenuSASS-使代码更简洁,sass,Sass,以下规则仅适用于#navmenu.someclass,因此此处不应影响#navmenu 我有两个特定的导航菜单,分别有“事件”和“事件类别”。共同的部分是‘ul’和‘li’,然后‘li a’不同。有没有办法合并下面两段sass代码,这样我就不必重复“ul”和“li”的规则。同样,navmenu不应受到影响,因为规则不适用于主navmenu #navmenu.events { ul { list-style-type: none; list-style-im
#navmenu.events {
ul {
list-style-type: none;
list-style-image: none;
li {
display: inline;
}
li a {
background: $p-dark;
margin: 4px;
padding: 5px 20px 5px 20px;
color: white;
}
}
}
#navmenu.events-categories {
ul {
list-style-type: none;
list-style-image: none;
li {
display: inline;
}
li a {
margin: 1px;
padding: 2px 5px 2px 5px;
}
}
}
您始终可以将公共代码移动到选择器并使用指令
%common {
ul {
list-style-type: none;
list-style-image: none;
li {
display: inline;
}
}
}
#navmenu.events-categories, #navmenu.events {
@extend %common;
}
#navmenu.events {
ul {
li a {
background: $p-dark;
margin: 4px;
padding: 5px 20px 5px 20px;
color: white;
}
}
}
#navmenu.events-categories {
ul {
li a {
margin: 1px;
padding: 2px 5px 2px 5px;
}
}
}
这将导致以下CSS:
#navmenu.events-categories ul, #navmenu.events ul {
list-style-type: none;
list-style-image: none;
}
#navmenu.events-categories ul li, #navmenu.events ul li {
display: inline;
}
#navmenu.events ul li a {
background: red;
margin: 4px;
padding: 5px 20px 5px 20px;
color: white;
}
#navmenu.events-categories ul li a {
margin: 1px;
padding: 2px 5px 2px 5px;
}
您始终可以将公共代码移动到选择器并使用指令
%common {
ul {
list-style-type: none;
list-style-image: none;
li {
display: inline;
}
}
}
#navmenu.events-categories, #navmenu.events {
@extend %common;
}
#navmenu.events {
ul {
li a {
background: $p-dark;
margin: 4px;
padding: 5px 20px 5px 20px;
color: white;
}
}
}
#navmenu.events-categories {
ul {
li a {
margin: 1px;
padding: 2px 5px 2px 5px;
}
}
}
这将导致以下CSS:
#navmenu.events-categories ul, #navmenu.events ul {
list-style-type: none;
list-style-image: none;
}
#navmenu.events-categories ul li, #navmenu.events ul li {
display: inline;
}
#navmenu.events ul li a {
background: red;
margin: 4px;
padding: 5px 20px 5px 20px;
color: white;
}
#navmenu.events-categories ul li a {
margin: 1px;
padding: 2px 5px 2px 5px;
}
回答得好@pentzzsolt回答得好@pentzzsolt