CSS Переменные | CSS Variables | функция var()
HTML-код
- Опубликовано: 26 июл 2024
- ✏️ CSS-переменные - технология, которая недооценена многими разработчиками, особенно начинающими и в большинстве случаев их использование ограничивают заданием палитры цветов. Я же предлагаю углубиться детальнее в то, что на самом деле из себя представляют CSS-переменные и то, на какую мощь они действительно способны.
🔴 Timeline:
▶ 00:00 | Вступление
▶ 00:26 | Что такое CSS-переменные
▶ 00:40 | Объявление CSS-переменных
▶ 00:56 | Правильный нейминг CSS-переменных
▶ 01:16 | Использование CSS-переменных, функция var()
▶ 01:30 | Запасное значение (фоллбэк) для CSS-переменных
▶ 01:47 | Область видимости CSS-переменных
▶ 02:30 | Переопределение CSS-переменных
▶ 02:52 | Использование в значении CSS-переменной другой CSS-переменной
▶ 03:38 | Для чего нужны CSS-переменные
▶ 04:30 | Глобальные CSS-переменные, селектор :root
▶ 05:54 | Локальные CSS-переменные
▶ 08:12 | Использование CSS-переменных в HTML-разметке
▶ 09:23 | Управление CSS-переменными через JavaScript
▶ 10:05 | Заключение
📚 Полезные ссылки:
➖ Гайд по кастомным свойствам на doka: doka.guide/css/custom-propert...
➖ CSS Variables на caniuse: caniuse.com/css-variables
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #css
![Young Nudy - John Wayne (feat. Metro Boomin) [Official Video]](http://i.ytimg.com/vi/NY8HnYYo2fo/mqdefault.jpg)
Не ожидал увидеть shelter в примере! Как раз повторяю переменные перед версткой этого макета))
Недавно смотрела про переопределение переменной в локальном контейнере на английском и там какой-то сложный был пример. У тебя получилось понятнее. Спасибо :)
Отлично! Спасибо. Только просьба в следующих видео чуть по медленнее.)
Огромное спасибо за то, что делитесь опытом, этого очень не хватает, когда учишься сам, информации полно, но вот, что сейчас принято использовать в разработке непонятно, надеюсь будете продолжать, очень интересно смотреть
урок очень хороший. слушаю с удовольствием.
Круто, попробую сверстать проект без SCSS. Для полного счастья миксинов только не хватает )
Мощнейшая штука!!! Спасибо!
Какой же топ!
годный материал🎉. благодарю😊
Благодарю, на одном дыхании )
После обновы фигмы этим летом переменные достаточно понятны)
Нифига контент подъехал
Пасиба
Супер, лайк
👍👍👍
Спасибо за качественный контент!!! У меня есть вопрос, можно ли каким-нибудь способом менять значения в @media (max-width: {value})? Я бы хотел налету менять значения в медиа запросах
Привет! Спасибо за фидбек :) Отвечая на твой вопрос - нет, к сожалению, такой возможности нет. Но если объяснишь в какой именно ситуации тебе это нужно, то я постараюсь придумать решение.
CSS Переменные | CSS Variables | функция var()
Подскажите пожалуйста, знающие люди, лучше изучать HTML вместе с CSS попутно, либо раздельно? Только начал изучение и немного не ясно.
Последовательно, начиная с HTML. При изучении CSS все равно будет много пересечений с HTML. Ну и во время изучения теории желательно параллельно практиковаться, как минимум - пытаться повторить то, что приводится в обучающем материале, а ещё лучше - выходить за рамки темы и экспериментировать.
@@AleksanderLamkov спасибо большое за ответ!
а можно посмотреть проект личного сайта на гитхабе?) очень интересно было бы посмотреть как ты там полноценно используешь переменные
Привет! Можно: github.com/aleksanderlamkov/aleksanderlamkov
Файл стилей с глобальными переменными: github.com/aleksanderlamkov/aleksanderlamkov/blob/main/src/styles/vars.pcss
Файл стилей для "сцены с ноутбуком":
github.com/aleksanderlamkov/aleksanderlamkov/blob/main/src/styles/blocks/hero-scene.pcss
Но всё немного сложнее, чем показанное в этом видео. Переменные я использую в совокупности с миксинами от препроцессора стилей PostCSS.
@@AleksanderLamkov спасибо)
JS буде?
Обязательно будет, но после нескольких мастер-классов по верстке. Ориентировочно - в ноябре.
@@AleksanderLamkov чекаю з нетерпінням ☺️
Спасибо большое за урок! Есть ли разница использовать переменные из scss в виде $variable и переменных var? var писать неудобнее в vs code)
Привет! Спасибо за обратную связь :)
Отвечаю на вопрос - разница есть.
CSS-переменные работают в рантайме (при непосредственном запуске сайта в браузере) и ими можно манипулировать через JS.
Переменные из Sass же компилируются и после преобразования scss-файла в css они пропадают, заменяются на конкретные значения.
Я не советую использовать $, используйте var.
Сейчас нет смысла в Sass-переменных. Они использовались раньше из-за необходимости, когда CSS-переменных var не существовало.
Хорош 👍
А если писать на препроцессоре, то переменные css не используются, а используются только те, которые написано в препроцессоре, верно? Или можно писать переменные как в css и все корректно будет работать?
При работе с препроцессором можно использовать обычные CSS-переменные.
Разница в синтаксисе и в том, что переменные препроцессора после преобразования из финального css-файла пропадают, а места, где они были использованы, заменятся на их значения.
Главный недостаток переменных препроцессора в том, что ими нельзя манипулировать в рантайме, нельзя им задать значение в разметке, через инлайновый атрибут style и нельзя ими управлять через JavaScript.
@@AleksanderLamkov то есть если пишешь с помощью препроцессора, то эти недостатки никак не закрыть?
Ну, исходный код в синтаксисе препроцессора все равно ведь на выходе будет преобразован в обычный CSS. А переменные на синтаксисе препроцессора ≠ переменные в синтаксисе обычного CSS. Поэтому используют обычно что-то одно.
у кого то зализанная причёсочка набок остаётся до конца жизни
Ааа, это ты, который кнопки нормальные в ВК сделать не может?
Так это... процесс то не быстрый! Кнопку покрасить - это таска на полгода-год...
Добрый день!
Искренне не понимаю зачем нужна говорящая голова в кадре в обучающем видео, к тому же читающая с листка
Плюс каждое видео начинается с знакомства и предложения подписаться на канал, по итогу мы имеем 30 секунд потраченного времени каждый раз
Хочется уже перестать знакомиться и начать кодить
Добрый! Потому что я так хочу, потому что всё это нужно для моих целей.
Если мешает приветствие, перематывайте на нужное место или переходите на нужный таймкод из описания.
Про потраченное время - уж не на канале с бесплатным контентом это надо говорить. Я на каждое подобное видео трачу десяток часов своего свободного времени. Уж извините, что трачу драгоценные 30 секунд вашего времени перед тем, как выдать 10 минут концентрированного образовательного контента без воды.
ЧСВшкая мелкая