CSS Переменные | CSS Variables | функция var()

✏️ 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

[@UltimatePowerCoder]

Не ожидал увидеть shelter в примере! Как раз повторяю переменные перед версткой этого макета))

[@user-me5lo4ib7q]

Недавно смотрела про переопределение переменной в локальном контейнере на английском и там какой-то сложный был пример. У тебя получилось понятнее. Спасибо :)

[@karenbaratov7027]

Отлично! Спасибо. Только просьба в следующих видео чуть по медленнее.)

[@SergeyLuis]

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

[@PROBOYNIC]

Какой же топ!

[@user-er7nh1vg4j]

урок очень хороший. слушаю с удовольствием.

[@alexb.2616]

Мощнейшая штука!!! Спасибо!

[@rinatgabbazov4520]

годный материал🎉. благодарю😊

[@user-hg7ld2cb4k]

Круто, попробую сверстать проект без SCSS. Для полного счастья миксинов только не хватает )

[@akylbekbaizakov]

👍👍👍

[@виртуоз_ру]

Хорош 👍

[@aceracer5556]

Благодарю, на одном дыхании )

[@smotritelyoutube]

Супер, лайк

[@svitboomer8840]

Нифига контент подъехал

[@user-np8nk9km8y]

Пасиба

[@user-kq5gb7rf9i]

Спасибо за качественный контент!!! У меня есть вопрос, можно ли каким-нибудь способом менять значения в @media (max-width: {value})? Я бы хотел налету менять значения в медиа запросах

[@AleksanderLamkov]

Привет! Спасибо за фидбек :) Отвечая на твой вопрос - нет, к сожалению, такой возможности нет. Но если объяснишь в какой именно ситуации тебе это нужно, то я постараюсь придумать решение.

[@alexander_stark]

После обновы фигмы этим летом переменные достаточно понятны)

[@user-hw3ev1wb3y]

CSS Переменные | CSS Variables | функция var()

[@andrewsaigonez7719]

Подскажите пожалуйста, знающие люди, лучше изучать HTML вместе с CSS попутно, либо раздельно? Только начал изучение и немного не ясно.

[@AleksanderLamkov]

Последовательно, начиная с HTML. При изучении CSS все равно будет много пересечений с HTML. Ну и во время изучения теории желательно параллельно практиковаться, как минимум - пытаться повторить то, что приводится в обучающем материале, а ещё лучше - выходить за рамки темы и экспериментировать.

[@andrewsaigonez7719]

@@AleksanderLamkov спасибо большое за ответ!

[@user-gs7mx5yi4x]

Спасибо большое за урок! Есть ли разница использовать переменные из scss в виде $variable и переменных var? var писать неудобнее в vs code)

[@AleksanderLamkov]

Привет! Спасибо за обратную связь :) Отвечаю на вопрос - разница есть. CSS-переменные работают в рантайме (при непосредственном запуске сайта в браузере) и ими можно манипулировать через JS. Переменные из Sass же компилируются и после преобразования scss-файла в css они пропадают, заменяются на конкретные значения. Я не советую использовать $, используйте var. Сейчас нет смысла в Sass-переменных. Они использовались раньше из-за необходимости, когда CSS-переменных var не существовало.

[@VitalBielik]

а можно посмотреть проект личного сайта на гитхабе?) очень интересно было бы посмотреть как ты там полноценно используешь переменные

[@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.

[@VitalBielik]

@@AleksanderLamkov спасибо)

[@Ivanfwit]

А если писать на препроцессоре, то переменные css не используются, а используются только те, которые написано в препроцессоре, верно? Или можно писать переменные как в css и все корректно будет работать?

[@AleksanderLamkov]

При работе с препроцессором можно использовать обычные CSS-переменные. Разница в синтаксисе и в том, что переменные препроцессора после преобразования из финального css-файла пропадают, а места, где они были использованы, заменятся на их значения. Главный недостаток переменных препроцессора в том, что ими нельзя манипулировать в рантайме, нельзя им задать значение в разметке, через инлайновый атрибут style и нельзя ими управлять через JavaScript.

[@Ivanfwit]

@@AleksanderLamkov то есть если пишешь с помощью препроцессора, то эти недостатки никак не закрыть?

[@AleksanderLamkov]

Ну, исходный код в синтаксисе препроцессора все равно ведь на выходе будет преобразован в обычный CSS. А переменные на синтаксисе препроцессора ≠ переменные в синтаксисе обычного CSS. Поэтому используют обычно что-то одно.

[@This_is_hellwood]

JS буде?

[@AleksanderLamkov]

Обязательно будет, но после нескольких мастер-классов по верстке. Ориентировочно - в ноябре.

[@This_is_hellwood]

@@AleksanderLamkov чекаю з нетерпінням ☺️

[@user-zl6fy7do7x]

у кого то зализанная причёсочка набок остаётся до конца жизни

[@Semyonioni]

Ааа, это ты, который кнопки нормальные в ВК сделать не может?

[@AleksanderLamkov]

Так это... процесс то не быстрый! Кнопку покрасить - это таска на полгода-год...

[@angelina7930]

Добрый день! Искренне не понимаю зачем нужна говорящая голова в кадре в обучающем видео, к тому же читающая с листка Плюс каждое видео начинается с знакомства и предложения подписаться на канал, по итогу мы имеем 30 секунд потраченного времени каждый раз Хочется уже перестать знакомиться и начать кодить

[@AleksanderLamkov]

Добрый! Потому что я так хочу, потому что всё это нужно для моих целей. Если мешает приветствие, перематывайте на нужное место или переходите на нужный таймкод из описания.

[@AleksanderLamkov]

Про потраченное время - уж не на канале с бесплатным контентом это надо говорить. Я на каждое подобное видео трачу десяток часов своего свободного времени. Уж извините, что трачу драгоценные 30 секунд вашего времени перед тем, как выдать 10 минут концентрированного образовательного контента без воды.

[@andreiley7951]

ЧСВшкая мелкая