Блог

Главная - Вопросы по программированию - Перезапись атрибутов SCSS

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

#css #sass #jekyll #github-pages #jekyll-theme

#css #sass #джекилл #github-страницы #джекилл-тема

Вопрос:

Я пытаюсь изменить цвет баннера в теме Jekyll leap-day, здесь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;
}

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

Комментарии:

1. @HassanSiddiqui что ты имеешь в виду

2. В вашем описании вы сказали, что добавили вышеуказанный CSS в style.scss, но я не могу найти эти изменения в assets/css/style.scss .

3. @HassanSiddiqui Существует два файла стилей, а не один. Первый импортирован, второй принадлежит мне и находится на post.

4. Можем ли мы указать URL репозитория? Это лучше для отладки.

Ответ №1:

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

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

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

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

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

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