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

Следующие правила применяются только к # 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;
        }
    }
}

sass

26.08.2018 09:30

Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации

Если вы планируете стать веб-разработчиком, вы наверняка слышали о CSS - языке, используемом для стилизации HTML-документов. CSS является неотъемлемой...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы всегда можете переместить общий код в селектор заполнитель и использовать директиву @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;
}

Хороший ответ @pentzzsolt

— 27.08.2018 14:39

26.08.2018 09:43