SASS - make the code more concise - sass

Question

The following rules only apply to #navmenu.someclass, so just #navmenu should not be affected here.
I have 2 specific navmenus with classes 'events' and 'events-categories'. The common part is 'ul' and 'li' then the 'li a' differs. Is there a way of merging the two blocks of sass code below so I don't have to duplicate rules for 'ul' and 'li'. Again #navmenu should not be affected as the rules do not apply to the main navmenu.
#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;
}
}
}

Answer 1

You can always move the common code to a placeholder selector and use the #extend directive.
%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;
}
}
}
This will result in the following 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;
}