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

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

Просмотров 3,1 тыс.

50% 1

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

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

8 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@user-me5lo4ib7q 7 месяцев назад

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

@SergeyLuis 7 месяцев назад

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

@CportS1la 7 месяцев назад

Какой же топ!

@karenbaratov7027 7 месяцев назад

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

@alexb.2616 7 месяцев назад

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

@user-er7nh1vg4j 5 месяцев назад

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

@rinatgabbazov4520 7 месяцев назад

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

@aceracer5556 7 месяцев назад

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

@svitboomer8840 7 месяцев назад

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

@akylbekbaizakov Месяц назад

👍👍👍

@user-np8nk9km8y 7 месяцев назад

Пасиба

@smotritelyoutube 7 месяцев назад

Супер, лайк

@alexander_stark 6 месяцев назад

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

@user-kq5gb7rf9i 4 месяца назад

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

@AleksanderLamkov 4 месяца назад

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

@virtuoz-ru 7 месяцев назад

Хорош 👍

@user-hw3ev1wb3y 7 месяцев назад

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

@andrewsaigonez7719 7 месяцев назад

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

@AleksanderLamkov 7 месяцев назад

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

@andrewsaigonez7719 7 месяцев назад

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

@VitalBielik 7 месяцев назад

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

@AleksanderLamkov 7 месяцев назад

Привет! Можно: 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 7 месяцев назад

@@AleksanderLamkov спасибо)

@user-gs7mx5yi4x 2 месяца назад

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

@AleksanderLamkov 2 месяца назад

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

@This_is_hellwood 7 месяцев назад

JS буде?

@AleksanderLamkov 7 месяцев назад

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

@This_is_hellwood 7 месяцев назад

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

@Ivanfwit 7 месяцев назад

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

@AleksanderLamkov 7 месяцев назад

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

@Ivanfwit 7 месяцев назад

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

@AleksanderLamkov 7 месяцев назад

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

@user-zl6fy7do7x 7 месяцев назад

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

@angelina7930 3 месяца назад

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

@AleksanderLamkov 3 месяца назад

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

@AleksanderLamkov 3 месяца назад

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