SASS - сделать код более лаконичным

Question

Следующие правила применяются только к # navmenu.someclass, поэтому здесь не должно быть затронуто только #navmenu.

У меня есть 2 специальных меню с классами «события» и «события-категории». Общая часть - это «ul» и «li», тогда «li a» отличается. Есть ли способ объединения двух блоков кода sass, приведенных ниже, чтобы мне не приходилось дублировать правила для 'ul' и 'li'. Снова #navmenu не должно быть затронуто, поскольку правила не применяются к главному 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

Вы всегда можете переместить общий код в селектор placeholder и использовать директиву @extend.

%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;
}