Перезапись атрибутов SCSS - PullRequest
Новая
       97

Перезапись атрибутов SCSS

0 голосов
/ 05 апреля 2019

Я пытаюсь изменить цвет баннера в теме високосного Джекила, здесь https://github.com/pages-themes/leap-day/blob/master/_sass/jekyll-theme-leap-day.scss

Для этого я добавил assets/css/style.scss на свою страницу github со следующим содержанием 

 ---
 ---

@import "{{ site.theme }}";

#banner {
    background: #a90000;
    border: 1px solid #3399cc;
}

Но ничего не изменилось. Как я могу переписать эти значения баннера div в SCSS?

1 Ответ

1 голос
/ 05 апреля 2019

Есть ряд причин, по которым это может не сработать.Не будучи знакомыми с выводом и HTML, вы разрабатываете здесь некоторые вещи, которые вы должны проверить (все из которых вы можете проверить с помощью инструментов разработчика браузера. Например: Chrome DevTools )

  1. элемент с id="banner" существует в вашем html и является видимым.
  2. Ваши дополнения к SCSS фактически включены и применяются к элементу.Вы можете проверить это в инструментах разработчика Chrome, проверив элемент.Под стилями вы должны видеть свои правила стиля вместе с другими.Если вы не можете этого сделать, возможно, у вас проблема с селектором, вероятно, вызванная некоторыми ранее вложенными стилями.(Если вы также исключили это, и ваши дополнения нигде не отображаются в выходных данных, значит, что-то не так с тем, как вы строите и выбираете свой SCSS).
  3. Если вы можете видеть их, но у них естьпроходя через них, они отменяются правилами с более высокой специфичностью CSS.Вы можете исправить это, сделав ваши селекторы более конкретными.Например, 
div#banner {
    background: #a90000;
    border: 1px solid #3399cc;
}

Или, возможно, 

.someWrappingClass #banner{
    background: #a90000;
    border: 1px solid #3399cc;
}

Принимая во внимание, что они изменят способ их выбора - что может стать проблемой позже, если изменился HTML.

Действительно, как вы исправите проблемы специфичности, будет полностью зависеть от вашего HTML, как вы его структурируете и как вы можете изменить его в будущем.На самом деле ничто не заменит просто узнать, как работает каскад и наследование .

...