мой scss не переопределяет framework css UIKit

#html #css #sass #getuikit

#HTML #css #sass #getuikit

Вопрос:

У меня возникли проблемы с использованием scss для переопределения правил framework css. Если я добавлю !important , все будет работать нормально… Что я должен сделать, чтобы это работало без использования этого правила?
.html-код:

 <nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
</nav>

.scss-код:

 .uk-navbar-container {
background: #383c4a;
}

Опять же, если я добавлю !important , моя панель навигации изменит цвет…

1. Вы всегда можете проверить applied styled для элемента в devtools, а также почему определенные стили были переопределены и чем. Скорее всего, ваши стили загружаются до фреймворка и в соответствии с тем, как работает css, используется последнее правило.

2. У меня есть класс в инструментах разработки под названием .uk-navbar-container:not(.uk-navbar-transparent) , который переопределяет мое правило css.

Ответ №1:

Ваша проблема в том, что это .uk-navbar-container:not(.uk-navbar-transparent) более конкретно, чем ваше .uk-navbar-container правило. Другой момент заключается в том, что обычно вы не хотите переопределять правила фреймворка только для одного исправления, потому что это повлияет на всю вашу кодовую базу.

Один из способов исправить вашу проблему — добавить более конкретное правило, например

 .uk-navbar-container.--grey {
    background: #383c4a;
}

… и затем в html

 <nav class="uk-navbar-container --grey" uk-navbar>

Это поможет, но только в том случае, если правило определено после .uk-navbar-container:not(.uk-navbar-transparent) , потому что они имеют одинаковую специфику и будет применено последнее. Я прикрепил фрагмент, чтобы продемонстрировать, как это работает.

Прочитайте больше о специфичности, чтобы лучше понять проблему, а также, возможно, вы захотите ознакомиться с этой статьей с примерами с not .

 body {
  font-size: 22px;
}
.test:not(.another) {
  color: blue;
}
.test {
  color: red;
}
.test.green {
  color: green;
}

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="test">I'm blue</div>
    <div class="test green">I'm green</div>
  </body>
</html>