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

Пікірлер: 37

  • @user-me5lo4ib7q
    @user-me5lo4ib7q7 ай бұрын

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

  • @SergeyLuis
    @SergeyLuis7 ай бұрын

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

  • @karenbaratov7027
    @karenbaratov70277 ай бұрын

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

  • @alexb.2616
    @alexb.26167 ай бұрын

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

  • @CportS1la
    @CportS1la7 ай бұрын

    Какой же топ!

  • @user-er7nh1vg4j
    @user-er7nh1vg4j5 ай бұрын

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

  • @rinatgabbazov4520
    @rinatgabbazov45207 ай бұрын

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

  • @akylbekbaizakov
    @akylbekbaizakovАй бұрын

    👍👍👍

  • @aceracer5556
    @aceracer55567 ай бұрын

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

  • @user-np8nk9km8y
    @user-np8nk9km8y7 ай бұрын

    Пасиба

  • @svitboomer8840
    @svitboomer88407 ай бұрын

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

  • @smotritelyoutube
    @smotritelyoutube7 ай бұрын

    Супер, лайк

  • @alexander_stark
    @alexander_stark6 ай бұрын

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

  • @user-kq5gb7rf9i
    @user-kq5gb7rf9i4 ай бұрын

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

  • @AleksanderLamkov

    @AleksanderLamkov

    4 ай бұрын

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

  • @VitalBielik
    @VitalBielik7 ай бұрын

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

  • @AleksanderLamkov

    @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

    @VitalBielik

    7 ай бұрын

    @@AleksanderLamkov спасибо)

  • @user-hw3ev1wb3y
    @user-hw3ev1wb3y7 ай бұрын

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

  • @andrewsaigonez7719
    @andrewsaigonez77197 ай бұрын

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

  • @AleksanderLamkov

    @AleksanderLamkov

    7 ай бұрын

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

  • @andrewsaigonez7719

    @andrewsaigonez7719

    7 ай бұрын

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

  • @virtuoz-ru
    @virtuoz-ru7 ай бұрын

    Хорош 👍

  • @user-gs7mx5yi4x
    @user-gs7mx5yi4x2 ай бұрын

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

  • @AleksanderLamkov

    @AleksanderLamkov

    2 ай бұрын

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

  • @This_is_hellwood
    @This_is_hellwood7 ай бұрын

    JS буде?

  • @AleksanderLamkov

    @AleksanderLamkov

    7 ай бұрын

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

  • @This_is_hellwood

    @This_is_hellwood

    7 ай бұрын

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

  • @Ivanfwit
    @Ivanfwit7 ай бұрын

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

  • @AleksanderLamkov

    @AleksanderLamkov

    7 ай бұрын

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

  • @Ivanfwit

    @Ivanfwit

    7 ай бұрын

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

  • @AleksanderLamkov

    @AleksanderLamkov

    7 ай бұрын

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

  • @user-zl6fy7do7x
    @user-zl6fy7do7x7 ай бұрын

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

  • @angelina7930
    @angelina79303 ай бұрын

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

  • @AleksanderLamkov

    @AleksanderLamkov

    3 ай бұрын

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

  • @AleksanderLamkov

    @AleksanderLamkov

    3 ай бұрын

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

  • @andreiley7951

    @andreiley7951

    Ай бұрын

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

Келесі