seregadushka
@seregadushka
minsk

Как изменить переменную BootStrap, которая есть?

Часто читаю требования — «меньше слов, покажи код»
Считаю, что полностью выполнил требования.

INDEX.HTML
index.png

CUSTOM CSS
Custom.png

BODY
BIG.png
Самая вредная переменная в желтой рамке. Ее надо убить первой.

Проблема в том, что подключенный BootStrap5 регистрирует переменную --bs-body-bg: везде, где только можно, в основном там, где это не нужно. Я постарался показать все места, где я его нашел.

Основная просьба: не трогать

<style>
  body { background-color: #DC143C;   } 
  </style>


он находится в INDEX.HTML в строке 16. Ее не трогать. Она условно :RED

в CUSTOM.CSS я пишу

:root { --bs-body-bg:none !important;  }
 body { --bs-body-bg: none !important;  }


но это не помогает. Страница все равно белая. Должна быть RED.

Все сложно, на чистой странице в блокноте или Codepen эта переменная --bs-body-bg: Bootstrap поддерживает НЕпрозрачность. Это бы даже и пригодилось. Но здесь придание ей вроде rgba(50, 100, 200, 0.5) просто делаем бледный цвет. Подложка не видна, прозрачности нет.
Но черт с ней с прозрачностью. Хотя бы убить ее полностью.

Где што прописать, чтобы ее вообще не было?

CUSTOM.CSS подключен после BootStrap. Но это не помогает. Переменная --bs-body-bg: все равно встречается несколько раз. В :root и body недостаточно.
После пристального изучения я вижу, что из 4 штук 2 моих. Нижняя мало участвует. Осталась одна желтая вредность.
Почему она не уничтожается через
body { --bs-body-bg: none !important; }
?

Цель всего исследования: Как увидеть этот RED под картинками?

Галерея: PhotoBox
Оригинал: lightbox-photobox

Это 2-я серия вопросов про Как изменить переменную SCSS, которой нет?.
  • Вопрос задан
  • 357 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
=))

Ну давай попробую еще раз.

Самая вредная переменная в желтой рамке. Ее надо убить первой.


Вы ее уже "убили".
Вы задали значение "none".
У вас получилось после обработки браузером
background-color: none !important
Кстати, для background-color это не валидное значение. Оно может принимать только цвет.
Но хрен с ним – невалидное значение будет проигнорировано. А значит цвет станет по умолчанию назначенным браузером. Како1 цвет у окна, когда не заданы вообще никакие стили? Правильно- белый.

Теперь идем к сути проблемы. А именно смотрим на это:

66696e238e184969345989.png

Здесь примененные стили отображаются каскадно снизу вверх. Наиболее приоритетные вверху.
Я специально вырезал скриншот без объявления переменной чуть выше. Не имеет отношения.

Сначала браузер применяет стиль background-color: #DC143C; который прописан в index.html
А потом применяет стиль background-color: var(--bs-body-bg);, который находится в bootstrap.scss

Cами вы не догадываетесь почему. А все просто. Стили объявленные или подключенные ниже имеют больший приоритет.

Обязательно почитайте что такое CSS-каскад. Оно, кстати, так и расшифровывается Cascade style sheets - каскадные таблицы стилей.

На этом моменте, я надеюсь вы уже догадываетесь, что вам следует перенести style в index.html ниже подключения bootstrap.css

66697009ad72b667145238.png

Либо добавить там (в index.html) !important для стиля фона.

Или самое простое и правильное - поменять значение переменной, а не пытаться ее "убить" =))

6669702f6ec9d517413330.png

Основная просьба: не трогать


А почему? Цвет страницы задается скриптами и может меняться? Ну тогда этот цвет можно просто указывать в теге body и опять не заморачиваться с переопределениями и "убийствами" =)

<body style="--bs-body-bg: red">
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы