Как изменить переменную SCSS, которой нет?

Question

[serega danet]

с SCSS не знаком. Странная ситуация. Переменная есть в DevTools. В коде ее нет.
Она забивает цвет страницы на белый. Изменения body не помогает.
Как ее сделать transparent ?
PhotoBox

Comments

[alexalexes]

На переменную нажмите - перейдете к месту ее определения.
Если переменная подсвечивается, значит, она определена.

[webhero]

Найдите этот файл и посмотрите

[Froggyweb]

Мне вот интересно а как в понимании автора должен выглядеть прозрачный body %)

[serega danet]

Froggyweb, речь о переменной, а не о body. Мне надо сохранить body. Я не знаю его цвет. Может, ты знаешь ? Тут налепили правильных ответов детского уровня, а меня заблочили. Ответа нет.

[Froggyweb]

serega danet, Удалить переменную, объявленную в CSS нельзя. Можно лишь переопределить.
Ну Это же форум детей, явно не для вашего уровня вопросов, поэтому и заблочили.

[serega danet]

Интересные у вас тут модерация. Вопрос мой, оформление мое. Я пишу — ответ не подходит, вы тут ставите Правильно,, себе медали, меня блокируйте. Так наклепайте Себе сами детских вопросов и таких же ответов.

Answer 1

[Ivan Bogachev]

с SCSS не знаком. Странная ситуация. Переменная есть в DevTools. В коде ее нет.

Потому что --bs-body-bg к SCSS отношения не имеет. Это нативная CSS custom property, которую в вашем случае устанавливает Bootstrap.

Comments

[serega danet]

Нормальный этот bootstrap, если он перебивает body.
Надеюсь, простая перезапись этой переменной поможет

[modelair]

serega danet, причем тут нормальность бутстрапа? есть каскад, всё делается исходя из каскада

[serega danet]

modelair, т.е. если поднять мои стили в шапку, они бы перебили внешний bootstrap ?

Answer 2

[Сергей delphinpro]

Все css-переменные генерируются бутстрапом в начале его файла стилей для корневого селектора :root.

Большинство этих переменных (а может и все) получают свои значения из sass-переменных.

Если вы самостоятельно собираете стилевой файл бутстрапа, то вам следует найти соответствующие sass-переменные и исправить их. В данном случае речь идет о переменной $body-bg.

Если же не занимаетесь сборкой бутстраповских стилей, а просто взяли и подключили готовый файл bootstrap.min.css, то подключите ниже еще один css файл, в котором вы сможете переопределить любые стили фреймворка, в том числе css-переменные.

В данном случае напишите

:root {
  --bs-body-bg: red;
}

Comments

[serega danet]

Сергей спасибо за полный ответ.
Смешно, что у меня был это файл локальный , в чужом коде, версия 4. Месяц лежал, Увидел версию, нашел версию 5. Удалил файл и просто подключил внешний. Через час стал менять постоянный белый цвет body и вижу, что даже поиск не находит эту переменную . Менял бы цвет 2 часа назад, не задавал бы вопросов.

[Сергей delphinpro]

serega danet, мне кажется не стоит просто так брать и менять четвертую версию на пятую. Они все-таки отличаются.

[serega danet]

Сергей, не так просто ,как вы говорите. Я нашел 4 места на странице с этими --bs-body-bg:
У меня простая задача, -- сделать экран под этой галереей прозрачным. ! Все.
И нужен живой стиль body {background-color: ... }; Чтобы просто менять цвет body , не копаясь в коде.
Не получается.
Я конечно могу перечислить эти места. Я тут заколебался вычислять их приоритеты.

[Сергей delphinpro]

serega danet, ну так и напишите в своем файле стилей, подключенном после бутстрапа
можете и не заморачиваться в переменными

body {
  background-color: red;
};

[serega danet]

Сергей delphinpro, У меня подозрение, что
:root { --bs-body-bg: rgba(0,255,127,0.22); }
не делает экран под этой переменной прозрачным. Цвета не смешиваются ! Просто цвет бледный. Это просто невозможно с этим background-color:
Сейчас экран в body -- красный, а переменная зеленая-голубая с прозрачностью 0.22 . Это не мешает ей перекрывать боди.

[Сергей delphinpro]

serega danet, под какой еще переменной? =)) "экран под переменной" - вчитайтесь, что вы пишете...

Если хотите, давайте более предметно обсуждать. Делайте рабочий пример с проблемой на codepen.io, будем смотреть.

[serega danet]

Сергей delphinpro, в Codepen не удобно внешние скрипты смотреть . Я сам в блокноте все меняю :) -- с бэкапом на хостинг. Иногда просят именно хостинг с файлами.
В идеале просто вырезать эту --bs-body-bg: вообще , удалить ее

[Сергей delphinpro]

serega danet, Обычно никто не трогает библиотечные файлы. Их подключают как есть. В кодпене подключить внешние файлы можно.

[serega danet]

Сергей перенести в Codepen -- много работы, потому что здесь фото. Я сам жму F12 и все видно. Получше Codepen. DevTools мощнее. Вы же сами понимаете , что с внешним BoorStrap Codepen не поможет.

У меня такая структура index.html ----

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<code lang="html">
<link rel="stylesheet" href="css/custom.css">
</code>
<head>

я все пишу в css/custom.css -- но это не помогает. Он же после Bootstrap . Который эту переменную закинул везде, в 4 места.
Единственное условие - не переносить из начала страницы

body
{   background-color: #DC143C; }

Я в custom.css пишу

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

не помогает. Как ее убить ? как увидеть красный цвет под картинками ?

[Сергей delphinpro]

serega danet,

Вы же сами понимаете , что с внешним BoorStrap Codepen не поможет.

Всё он может...

https://codepen.io/delphinpro/pen/xxNXjLz


Как видите, цвет body прекрасно меняется на заданный.

Можете склонировать мой пример, и внести правки для демонстрации вашей проблемы. Потому что я пока не пойму ее сути

[serega danet]

смешно, у вас Бутстрап не подключен.

[Сергей delphinpro]

serega danet, ДА БЛИН!!!!!!!!!!!!
Нажми кнопку Resources

[Сергей delphinpro]

В самом кодпене здесь подключается

[serega danet]

Сергей delphinpro, у меня нет такой кнопки. В настройках скриптов нет.

[Сергей delphinpro]

serega danet, ну уж с интерфейсом codepen.io как-нибудь сами разберитесь. Там не сложно.

[serega danet]

к сожалению, у меня сложный пример, а не чистый лист бумаги.
У меня цвет body стоит на 16 строке. Я не могу его переносить . Мне надо убить эту переменную. Значение NONE подойдет .

[serega danet]

у вас в примере цвета работают правильно, смешиваются, прозрачность на месте. Это тоже результат. Но у вас простой пример. У меня похоже на то , что переменных от Бутстрапа несколько, и они забивают body. Кодепен здесь не подходит

[Сергей delphinpro]

serega danet, не имеет значения сколько переменных. Применяется всегда только одно значение. То которое задано последним.

Если не хотите пилить пример, то вряд ли смогу помочь.

[serega danet]

Сергей delphinpro, Сергей, вы же видите, у меня сложный сайт, уже готовый на 99%. Сложный, с ацким Lightbox , мощнейшей анимацией (хоть и чужое). 25 фотографий. Как вы это все предлагаете переносить на Кодепен ?
Может, мне с нуля весь сайт настрочить ? И что потом мне делать с этим голым Кодепен . Если там ошибка не воспроизведется ? Вспоминать, что я почистил при переносе ? BootStrap я не уберу и не почищу его.
Вы видели консоль в Кодепене ? Там половина кода -- это сам Кодепен.
Ваши слова не очень подходят к реальному проекту. -- "которая последняя " . спасибо, было интересно.
А которая последняя ?
REBOOT.SCSS или ROOT.SCSS
Этот BootStrap лезет в BODY и пихает туда свою переменную, куда я его не ставил.
Вы это в Кодепене увидите ?
Половина этих переменных в DevTools зачеркнуты -- откуда это ?
У меня последний подключается custom.css . И что толку с этого ? Это не работает.
Я уверен, что никто реальный проект с хостинга не потащит в Кодепен. Это только на работе можно, от безделья.
ем более я точно знаю пример, когда в Кодепене работает , а на хостинге нет. Кодепен там то-то мутит , особенно с OpenGL , подкручивает свои сервера, чего нет в самом коде. А люди потом весь инет заваливают вопросами "как перенести код из Кодепена".