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

Question

[serega danet]

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

INDEX.HTML


CUSTOM CSS


BODY

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

Проблема в том, что подключенный 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, которой нет?.

Comments

[Kentavr16]

Я очень давно так не смеялся. Спасибо.

[serega danet]

Kentavr16, пожалуйста, Я могу в оригинальном размере показать.
Я только начал вопрос задавать. Но основные иллюстрации уже на месте.

[Владислав Лысков]

serega danet, малыш, ты так ничего и не понял

[serega danet]

Владислав Лысков, поменьше беллетристики. Спасибо за помощь.

[Kentavr16]

serega danet, ты просишь помочь тебе биться головой в стенку. Если интересно, вот двери -
1) изучи css
2) почитай доки бутстрапа.
Забавно смотреть когда автор таких вопросов "ставит на место" людей, которые забыли о веб-разработке больше чем он будет знать в обозримом будущем)
В твоём прошлом вопросе тебе попытались крайне развернуто объяснить основы. Но вместо того чтобы обдумать новую информацию проще снова задать практически тот же вопрос .
Пардон за беллетристику

[serega danet]

Kentavr16, мне надо убить одну переменную , только ее. Я могу это сделать и более зверским способом. Но хочется правильно. Если вы мне вместо одной желтой рамки предлагаете курсы по CSS, то спасибо, не надо.

[serega danet]

Kentavr16, у меня уже была очень увлекательная история . Когда куратор и модератор пытался меня научить CSS . Он мне намеками , шутками-прибаутками, пытался вправить мозг.
Знаете сколько ? 4 суток. 12 экранов текста.
Предмет обучения ? Вот он --

===================== ; =====================

Теперь я как то опасаюсь принудительного обучения.

[imko]

serega danet, ну иди добровольно учичись, какая помощь когда ты сам против знаний

[serega danet]

Kentavr16, да , я читал невнимательно про Bootstrap.
Читаем еще раз корифеев CSS:

be aware that CSS variables do not work in media q...

https://getbootstrap.com/docs/5.1/customize/css-va...

Неожиданное совпадение: А теперь смотри мой мой код, который я вчера изобрел.
Вы же не открывали мой сайт. Вы больше про обучение малышей

@media (max-width: 1560px)  { --m: 1; }
@media (max-width: 1160px) { --m: 2; }
@media (max-width: 860px) { --m: 3; }
@media (max-width: 680px)  { --m: 4; }

К сожалению учителей, он работает.
Это как в Югославии в 1995 -- "а мы не знали, что он невидимый".
Я тоже не знал, что в @ media переменных не бывает.

[serega danet]

imko, ну я же вопрос не тебе задал. Ты здесь што делаешь ?

[imko]

serega danet, комментирую, што) личного вопроса мне для этого не требуется

[Ankhena]

Я очень рекомендую ознакомиться с работой селекторов, каскадом и специфичностью.
При равной специфичности выигрывает тот код, который окажется последним.
Кто и почему выиграл можно посмотреть через devtools на вкладке Computed.
А каскад для кастомных свойств работает точно также как и для обычных.

1. Итак, открываем и видим, что сначала идет тег style в котором про то, что фон должен быть красным. Поэтому он сразу проиграл всем.
2. А потом подключается бутстрап, который говорит, что фон body нужно взять из кастомки, а не тот красный. А в кастомке он белый (#fff)
3. Затем подключается custom.css, в котором ничего нет про само свойство background, т.е. продолжаем брать его из кастомного свойства. Но переопределяем кастомку на (none !important). Если вам хочется написать !important в своём коде только из-за того, что вы не понимаете, что происходит - вы городите дичь. Оно и без !important работает, просто по каскаду.
4. Таким образом вы получили прозрачный фон для body.
Проверить можно, задав любой фон для html.

картинки

Итого как переопределить бутстраповскую кастомку:
В своём custom.css просто берем и переопределяем её на свой цвет --bs-body-bg: blue; можно прямо в :root, поскольку в бутстрапе она определена именно там либо в body, поскольку применить хотим там.

ещё скрин

[serega danet]

imko, не надо цецепляться к нормальному профессиональному сленгу . Местные языки знаю достаточно, включая русский

[serega danet]

Ankhena, у вас ту на Хабре каждый 2 считает своим долгом ктнуть носом в какие-то каскады. Наверное, отдельное здание надо выделить , для книг о них ? Все ваши каскады сверху вниз, приоритет стилей укладываются в один абзац.
У вас очень красивые стрелочки типа dashed , очень стильно.
Там снизу синий квадратик из :root . Зао выше в body стоит точно такой же. Так какой из них последний ?

Спасибо, не могу я ломать цвет который на 16 строке в index.html .
Он должен определять цвет страницы, не BootStrap.
Тем более, не я его ставлю. цвет страницы. Вот был бы он перед /body, проблем бы не было. Да такая странная задача.

Когда задавал вопрос, не думал, что это сложно -- сохранить цвет страницы.
У меня несколько вариантов . Я поискал эту переменную по другим файлам, вообще не понимаю, что этот BootStrap на сайте . его надо удалить вместе с переменной.

[Ankhena]

serega danet, никто вас никуда не тыкает. Просто дело-то в нём, в каскаде. Поэтому и говорят.
И вы, вроде, демонстрируете желание разобраться. А значит, придётся в этот "один абзац" всё таки вникнуть. Думаю, вам это по силам.

Там снизу синий квадратик из :root . Зао выше в body стоит точно такой же. Так какой из них последний ?

Вы знаете, что такое :root и как он соотносится с body?
(Шепотом: О чёрт, сейчас ещё новое слово прилетит: наследование, в компанию к каскаду, там ещё "абзац")
Но вопрос без шуток.

И сразу вперед: background не наследуется, а вот кастомные свойства наследуются. Т.е. body унаследует кастомку, заданную в :root.
Но их можно переопределять.

Спасибо, не могу я ломать цвет который на 16 строке в index.html .
Он должен определять цвет страницы, на BootStrap.
Тем более, не я его ставлю. цвет страницы. Вот был бы он перед /body, проблем бы не было. Да такая странная задача.

Эта история отклонилась от вопроса.
Но предположим, что вам реально там нужен красный фон.
1. Дописать !important в строку в style. Если это можете.
2. Задать его (красный) фоном для html, а бутстраповский для body переопределить на прозрачный (через кастомку или напрямую в свойство). Только сразу на transparent или rgb(0,0,0,0), а не через none с important. Через none только если в краткой записи background.
3. Оставить body в покое, задавать фон дочернему блоку,растянув его на весь body.
4. Писать js, если не можете ни один из предыдущих.
5. Перебивать бутстраповский как написано в комментарии выше.

[serega danet]

Ankhena, да, с наследованием пока не встречался, у меня и так все работает. Какие-то свой ста наследуются, какие то нет. Это надо конкретно смотреть ,которое нужно.

2. Специально вам сдаю экзамен на специфичность стиля для body

<body style="
			--bs-body-bg: #00F6;						
			background-color: var(--bs-body-bg, #0F06);
/*			background-color: #D006;   						 */
			">
</body>

ничего не забыл -- правильное место, правильное положение.
Сильнее стиля не бывает , он последний .

там я пытаюсь понять, жива эта переменная, она еще дышит или умела ? что там с НЕпрозрачностью.
Но при обновлении страница мигает. !! Вероятно белым. Последний цвет , судя по строке без комментов. Это ненормально. Это говорит, о том, что Бутстрап тоже жив. И пытается поставить белый цвет. Странно как то это Хромиум работает. Между миганиями проходит ==0,1s . За эту 0,1s 8-ядерный процессор, наверное, успевает 8*3,5*10^9*0,1 = 2800000000 раз удивиться , какое значение последнее ? Но все-таки мигает. Так быть не должно. вс должно решаться там внутри CSS.
Получается , что Бутстрап просто так не умирает. И работает параллельно с последним стилем.

[serega danet]

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

body { 
       background-color: #FF0000 !important;

Нет, так я сделать не могу. Все равно перепишеься сверху. Без !important;

[Ankhena]

serega danet, я не знаю, что такое сломанная переменная.

Если речь про невалидное значение none для background-color, то конкретно хром его превращает в rgb(0,0,0,0). Убедиться можно в девтулз. Что делают другие браузеры проверяйте самостоятельно, если интересно.

Страница должна быть бледно Зеленой #0F0 .

Вчера красной..

Красный, зелёный, какой хочется.
Вы можете выбрать любой цвет и сделать так, как я написала в первом комментарии.
Это будет работать. Даже скрин приложила.

Если цвет прилетает скриптом, то отправляйте его в атрибут style.
<body style="--bs-body-bg: ЗЕЛЁНЫЙ">
Такой стиль имеет высокий приоритет и может быть перебит только с помощью !important.

[Сергей delphinpro]

непробиваемый экземпляр попался =)) сорри.

[serega danet]

Ankhena, не совсем я понял,

Таким образом вы получили прозрачный фон для body. Проверить можно, задав любой фон для html.

Я интересуюсь всем прозрачным . я только вижу, что любые неправильные операции с переменной сбрасывают ее на #fff, здесь нет прозрачности, которая по-русски все-таки НЕ... ( а здесь он еще и в bootstrap продублирован). С прозрачностью не понял

[Ankhena]

serega danet,

С прозрачностью не понял

Что именно не поняли? Вы задавали фон для html? Не видите его?

Речь повторю про хром. Использование невалидных значений может приводить к разным результатам в разных браузерах. Более того, со временем поведение может меняться.

[serega danet]

Меня заинтересовала эта ситуация «убийством» переменной. Наверное, даже больше, чем сам вопрос с цветом страницы.
Но это разные вопросы. Для меня значимость цвета страницы резко снизилась по другой причине. Потому что я уже знаю правильный ответ . Господа, я пока не готов принять с ни один из указанных ответов из приведенных решений . Хотя я вижу, конечно, огромные усилия с вашей стороны.
Но правильный ответ он другой. И он гораздо проще. чем ваши усилия, за которые я очень благодарен.
Сергей, вы правы. Нельзя менять одну версию Bootstrap на другую. У них --blue то одного оттенка, через год уже другого. Видно, проблема с производством красок на западе. Так они могут все поменять.
Я вчера лазил по этому Bootstrap. Очень много красивых названий для цветов , которые отличаются одним битом , целые очереди из бесполезных названия . У меня давно на винте лежала Bootstrap Studio. Скачал новую версию , ну примерно понятно. Посмотрел в Ютубе на работу профессионалов . И что я вижу -- ни одной именной переменной, которая указана в Bootstrap, ее там нет . Напомню, программа называется «Bootstrap Studio». Это интерфейс для удобной работы с чистым кодом HTML CSS . Никакого Bootstrap я там нет (я не заметил). Человек за час сделал сайт для Tesla. Наверное, получил миллион долларов и не использовал ни одной переменной Bootstrap.
Если ближе к теме, то вы видите, что в общем виде галереи Bootstrap нет. Там весь код – полстраницы. HTML – 1 строка, и чуть CSS с одним единственным flex на всю галерею.

& li { flex: 0 0 calc( 100% / max(1,( $col$ - var(--m, 0)))); 
Еще, извините, использовал запрещенные переменные в @media . 
@media (max-width: 1560рх)  { --m: 1; }

Не знал, что они запрещены .
Этот код я выкинул, он прекрасно заменяется 1 строкой ., или 4.

spoiler

ul.demo-2-column{ display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; justify-content: center !important;}
.demo-2-column li{ flex: 0 0 50%; max-width: 50%; padding: 0 15px;}

ul.demo-3-column{ display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; justify-content: center !important;}
.demo-3-column li{ flex: 0 0 33.333333%; max-width: 33.333333%; padding: 0 15px;}

ul.demo-4-column{ display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; justify-content: center !important;}
.demo-4-column li{ flex: 0 0 25%; max-width: 25%; padding: 0 15px;}

ul.demo-5-column{ display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; justify-content: center !important;}
.demo-5-column li{ flex: 0 0 20%; max-width: 20%; padding: 0 15px;}

.demo-4-column li{ flex: 0 0 100%; max-width: 100%;}
.demo-3-column li{ flex: 0 0 100%; max-width: 100%;}
.demo-2-column li{ flex: 0 0 100%; max-width: 100%;}

Я даже оставлю ссылку на подробный ответ Ивана по этой ситуации -- @media {}, загадочная черная точка и единица? . Мне кажется, полезно . В данном случае, полезнее, чем цвет страницы.
Он показал, что переменные в :root -- это не самые важные. Они тоже проблемные. Я это не понимаю, это надо просто запомнить.

Сорри, дополнил вопрос ссылкой на оригинал. Где-то давал, где-то нет.
Если вы открыли ссылку в вопросе, то видели, что галерея простая, самописная. И уже почти моя . Но ее LightBox -- вот, что самое ценное. И вот его я хотел сохранить.
Вы уже знаете все про эту галерею, и конечно, лучше меня.
Вопрос был «Как избавиться от принудительного #fff цвета из Bootstrap ? »
И для завершения этой темы : Я уже знаю правильное решение. Его в ваших предложениях нет. Жду ваш ответ. Как завершить тему правильным ответом ?

[Kentavr16]

serega danet, как спорить с человеком который не понимает о чем он спорит? А главное - зачем?

[imko]

serega danet,

Я уже знаю правильное решение

пора поставить точку в этой истории, решение в студию

[Ankhena]

serega danet,

Еще, извините, использовал запрещенные переменные в media .

Ну что за бред вы пишете, а?

Вот так писать можно и более того, очень удобно.
@media (max-width: 1560рх) { --m: 1; }

Нельзя использовать в условии.
Вот так нельзя:
@media (max-width: var(--width)) { стили }

Господа, я пока не готов принять с ни один из указанных ответов из приведенных решений .

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

Как завершить тему правильным ответом ?

Всё в порядке. Вам ничего делать не нужно.

[serega danet]

Да, "Цвет страницы задается скриптами и может меняться". Цвет страницы неизвестен. Цвет body меняется снаружи и многократно, и после написания этой страницы. Этот ответ не подходит.

Answer 1

[Сергей delphinpro]

=))

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

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

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

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



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

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

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

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

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



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

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

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

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

<body style="--bs-body-bg: red">

Comments

[Kentavr16]

святой Вы человек, Людвиг Аристархович!)

[serega danet]

Но хрен с ним – невалидное значение будет проигнорировано. А значит цвет станет по умолчанию назначенным браузером. Како1 цвет у окна, когда не заданы вообще никакие стили? Правильно- белый.

цвет background-color: должен не сбрасываться на белый, а оставаться таким, каким его задали валидным значением.
Вы точно уверены, что это так работает? Невалидное значение получила переменная , а не background-color: . По идее, на ней все должно и закончится, а у background-color: должно остаться предыдущее рабочее для этого свойства.

[serega danet]

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

)
все верно. не я устанавливаю цвет, !important не могу прописать. Во внешние CSS или JS что угодно. Но тут ваши каскады подкачали. Слабоваты они против BootStrap.

Что вы предложите:
1. Вообще удалить Bootstrap.css
2. Что-то прописать перед /body
3. Использовать скрипт.

[imko]

serega danet,

Невалидное значение получила переменная , а не background-color: .

переменная просто прокидывает значение туда где использована, значение в ней храниться может любое поэтому

цвет background-color: должен не сбрасываться на белый, а оставаться таким, каким его задали валидным значением.

должен, у него стоит невалидное значение, оно не откатывается на предыдущее валидное

[imko]

serega danet, попробуй сделать как написали хоть)

[serega danet]

imko, коллега, зря ты отметился в этой теме. Скоро ты пожалеешь об этом :) :)
Я тут долго тянул . Возможные варианты:

1. переглядеть все переменные из Bootstrap , понять какие можно заменить чем-то человеческим (знаешь, мне как то поровну 16.66666666% или 20%) , сократить их и отвязаться от Bootstrap. Предположу , что в этой галерее пару десятков интервалов , flexов и прочей фигни. Можно их выкинуть. Много работы, поэтому и тяну.

2. Читать значение из body и прописывать его же перед в background-color: в body перед /body --- никто не предложил ! Это мой способ ! Который я делать тоже не буду. Потому JS это всегда в последнюю очередь . И по другой причине :) .

попробуй сделать как написали хоть)

считай. что уже сделал. Сразу все предложения :) .

[serega danet]

Сергей , я уже вволю полазил по этому Bootstrap . Выводы мои:
там ничего интересного нет, какая-то свалка процентов, цветов и интервлов

Он еще и работает неправильно !! Столько времени забрал , у меня, я у вас.
У меня во всех браузерах стоит тема Dark, однозначно . Я это утверждал , когда еще был жив святой Jobs с его убийственным белым everywhere.
Откуда кривой Bootstrap брал --bs-body-bg: #fff ?
Вот что он должен был ставить :

[data-bs-theme=dark] {
  --bs-body-bg: #212529;

Я и без Bootstrap могу сказать, что это серый на 9% , с легким отклонением в голубизну.

[Сергей delphinpro]

serega danet,

Что вы предложите:

Я уже предложил. Если вам пока этого не понятно, то тут мои полномочия всё.

За сим удаляюсь =)

[serega danet]

Да, "Цвет страницы задается скриптами и может меняться". Цвет страницы неизвестен. Цвет body меняется снаружи и многократно, и после написания этой страницы. Этот ответ не подходит.