CSS переменные. Как использовать при верстке сайта?
HTML-код
- Опубликовано: 18 окт 2024
- В этом видео поговорим о переменных css. Рассмотрим на простом примере где и как их можно использовать, разберем особенности работы с CSS переменными и узнаем, а стоит ли их вообще использовать при верстке сайтов.
// Ссылки =================
Основы HTML и CSS: brainscloud.ru...
Файлы урока: files.brainscl...
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainsc...
Мой Instagram: / dmitryvalak
#верстка #html #css #css3
![Gunna - HIM ALL ALONG [Official Visualizer]](http://i.ytimg.com/vi/HiCxoDeo0hc/mqdefault.jpg)
Круто объясняешь, сделай пожалуйста урок про rem и em и их применение в адаптивной верстке
Семантически имя переменной не должно иметь "чётко указывающего факта". Потому что сегодня там #f2f2f2 а завтра совсем другой цвет... А имя переменной останется "white".
Спасибо за хороший урок!
Спасибо. Хорошо объяснил всё
Не знал такого спасибо
Валера Кабанец на здоровье )
лайк
Впервые вижу ролик, которому год и у которого нет дизов.
@@Vadim24689 прошло 2 года и 4 месяца, дизов по-прежнему нету :)
2,5 года и не одного диза
Я в шоке!!! Спасибо пошел учить!Спасибо за урок!
Пожалуйста )
Спасибо! Круто :)
Я думаю немного не верный контекст видео. Правильней было бы "Преимущества / отличия CSS и SASS переменных.
Из таких преимуществ:
возможность менять значения переменных в JS. Например высоту хедера и или сделать так цветную тему.
еще такой вопрос может прилететь на собеседовании
Доброго времени суток. Сделал отдельный елемент на react. Передаю в него параметры и в зависимости от параметров внутри useEffect меняю стили при помощи ( element1.setProperty('--percents', viewPercents ); ). Прохожу в цикле елементы с разными значениями. Но сработало только для первого елемента. Для остальных приминилось значение по умолчанию. Если сталкивались подскажите что не так делаю.
утром видел ролик там чел верстал и много много таких переменных писал и вот только ща я понял что это...кстати год прошел canius 95%
Расскажи пожалуйста про префиксы (если они так называются)
Где надо прописывать ?
-webkit итд
autoprefixer.github.io/ru/
Берете ваш весь CSS код и вставляете его на этом сайте, там всё автоматически всё сделает за вас. А так можно автоматизировать через сборщик проектов Gulp/Webpack и т.д.
@@Shakhrom-b7d
Большое спасибо, вы очень мне помогли.
Галп это случайно не Огненный дракон?
@@anonymoususer6103 , -webkit- , -moz- и т.д - префиксы для css свойств которые не поддерживают браузеры
Подскажите, кто пользуется VS Code у вас работают переменные? У меня почему то не получается.
это зависит не от редактора, а от браузера...
А что если вместо переменных прописать просто:
Color: #ffffff;
И прописывать ее так же как и переименную. Так она сработает ?
Anonymous User не понял вопроса
@@BrainsCloud два дефиса в начале имени переменной обязательны?
Чо за ide ? Светится когда нажимаешь на ксс в редакторе и светится в браузере ?
В Brackets плагин Live Preview. Не уверен умеет ли он так по дефолту делать, но ниже писали, что это Live Preview )
P.S. Прошедший год не важен)0))
вот какой смысл определять переменную в контейнере и там использовать её. Да даже если и в дочернем блоке такой же цвет и его взять записать в переменную. Как по мне зайти поменять в 2х блоках цвет проще чем громоздить код дополнительными color: var(--ухх..какой большой название).
7-32
А как ты так браузер сделал?
Live Preview в Brackets
@@BrainsCloud Ай, блин, подумал это sublime (а на нём случайно так нельзя?)
@@giornogiovanna5222 не знаю, не пользуюсь
@@BrainsCloud хорошо, спасибо
Насколько это безопасно? Переменные то глобальные..
по моему через sass это намного удобнее делать
21ban урок то не про sass
а что если у вас конечный скомпилированный CSS файл, конвертировать всё в SASS и автозаменой все заменять? А так у вас есть переменные прямо в css и даже в продакшене можете менять без лишних телодвижений.
Шахром Мукумов да, на самом деле цсс переменные имеют преимущества над sass переменными, ждём большей поддержки браузеров!
. Помогите!
Мне кажется использование переменных в css только усложняет процесс вёрстки.