CSS переменные. Как использовать при верстке сайта?

Подписаться 176 тыс.

Просмотров 21 тыс.

50% 1

В этом видео поговорим о переменных 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

Опубликовано:

28 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

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

@Boned101 5 лет назад

Круто объясняешь, сделай пожалуйста урок про rem и em и их применение в адаптивной верстке

@VRazvedkaSPN 3 года назад

Семантически имя переменной не должно иметь "чётко указывающего факта". Потому что сегодня там #f2f2f2 а завтра совсем другой цвет... А имя переменной останется "white".

@ВалераКабанец-ц6ь 5 лет назад

Не знал такого спасибо

@BrainsCloud 5 лет назад

Валера Кабанец на здоровье )

@Ivlievs Год назад

Спасибо за хороший урок!

@shava1788 4 года назад

Впервые вижу ролик, которому год и у которого нет дизов.

@evgeny_se2461 3 года назад

@@Vadim24689 прошло 2 года и 4 месяца, дизов по-прежнему нету :)

@dimdim1268 3 года назад

2,5 года и не одного диза

@ВикторияЛи-в2и 2 года назад

Спасибо. Хорошо объяснил всё

@dmitrijponkin 5 лет назад

Спасибо! Круто :)

@LuckyStilet1 3 года назад

Я думаю немного не верный контекст видео. Правильней было бы "Преимущества / отличия CSS и SASS переменных. Из таких преимуществ: возможность менять значения переменных в JS. Например высоту хедера и или сделать так цветную тему.

@ДенисЛюбченко-л4о 3 года назад

еще такой вопрос может прилететь на собеседовании

@димакузнецов-ц9в Год назад

лайк

@yurisamarin8200 3 года назад

утром видел ролик там чел верстал и много много таких переменных писал и вот только ща я понял что это...кстати год прошел canius 95%

@yegoryegor1448 4 года назад

Доброго времени суток. Сделал отдельный елемент на react. Передаю в него параметры и в зависимости от параметров внутри useEffect меняю стили при помощи ( element1.setProperty('--percents', viewPercents ); ). Прохожу в цикле елементы с разными значениями. Но сработало только для первого елемента. Для остальных приминилось значение по умолчанию. Если сталкивались подскажите что не так делаю.

@singlebw4065 5 лет назад

вот какой смысл определять переменную в контейнере и там использовать её. Да даже если и в дочернем блоке такой же цвет и его взять записать в переменную. Как по мне зайти поменять в 2х блоках цвет проще чем громоздить код дополнительными color: var(--ухх..какой большой название).

@bark205 5 лет назад

Подскажите, кто пользуется VS Code у вас работают переменные? У меня почему то не получается.

@nicofood1986 3 года назад

это зависит не от редактора, а от браузера...

@anonymoususer6103 5 лет назад

А что если вместо переменных прописать просто: Color: #ffffff; И прописывать ее так же как и переименную. Так она сработает ?

@BrainsCloud 5 лет назад

Anonymous User не понял вопроса

@petr.sleptsov 3 года назад

@@BrainsCloud два дефиса в начале имени переменной обязательны?

@Creator-A 3 года назад

7-32

@giornogiovanna5222 5 лет назад

А как ты так браузер сделал?

@BrainsCloud 5 лет назад

Live Preview в Brackets

@giornogiovanna5222 5 лет назад

@@BrainsCloud Ай, блин, подумал это sublime (а на нём случайно так нельзя?)

@BrainsCloud 5 лет назад

@@giornogiovanna5222 не знаю, не пользуюсь

@giornogiovanna5222 5 лет назад

@@BrainsCloud хорошо, спасибо

@FRAGILE304 3 года назад

Насколько это безопасно? Переменные то глобальные..

@sergeydegovets4658 5 лет назад

по моему через sass это намного удобнее делать

@BrainsCloud 5 лет назад

21ban урок то не про sass

@Shakhrom-b7d 5 лет назад

а что если у вас конечный скомпилированный CSS файл, конвертировать всё в SASS и автозаменой все заменять? А так у вас есть переменные прямо в css и даже в продакшене можете менять без лишних телодвижений.

@BrainsCloud 5 лет назад

Шахром Мукумов да, на самом деле цсс переменные имеют преимущества над sass переменными, ждём большей поддержки браузеров!

@designhacker9864 2 года назад

. Помогите!

@progerlife6690 5 лет назад

Я в шоке!!! Спасибо пошел учить!Спасибо за урок!

@BrainsCloud 5 лет назад

Пожалуйста )

@vetersvobodnyi3210 5 лет назад

Чо за ide ? Светится когда нажимаешь на ксс в редакторе и светится в браузере ?

@f0r3zasdas39 3 года назад

В Brackets плагин Live Preview. Не уверен умеет ли он так по дефолту делать, но ниже писали, что это Live Preview ) P.S. Прошедший год не важен)0))

@anonymoususer6103 5 лет назад

Расскажи пожалуйста про префиксы (если они так называются) Где надо прописывать ? -webkit итд

@Shakhrom-b7d 5 лет назад

autoprefixer.github.io/ru/ Берете ваш весь CSS код и вставляете его на этом сайте, там всё автоматически всё сделает за вас. А так можно автоматизировать через сборщик проектов Gulp/Webpack и т.д.

@anonymoususer6103 5 лет назад

@@Shakhrom-b7d Большое спасибо, вы очень мне помогли.