F2ba2c: статьи и новости по теме

18.06.2024

Как использовать переменные в CSS? Нужны ли Sass и Less?

При оформлении веб-страниц разработчикам часто приходится повторять одни и те же значения свойств в нескольких сегментах таблиц стилей - например, при использовании основного акцентного цвета для различных элементов веб-страницы.
Но теперь CSS поддерживает использование пользовательских свойств, также известных как переменные CSS, чтобы избежать пов…

\n","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Структура этой разметки довольно стандартна. Обратите внимание, что каждый элемент кнопки имеет два класса: класс btn и второй класс. В данном случае мы будем называть класс btn базовым классом, а второй класс - классом-модификатором, который состоит из префикса btn-.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Далее добавьте следующее содержимое тега стиля к приведенному выше

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Класс btn содержит базовые стили для всех кнопок, а вариации появляются там, где отдельные классы-модификаторы получают доступ к своим цветам, которые определяются на уровне :root документа. Это очень полезно не только для кнопок, но и для других элементов HTML, которые могут наследовать пользовательские свойства.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Например, если завтра вы решите, что значение пользовательского свойства --error слишком тусклое для красного цвета, вы можете легко изменить его на #f00000. Как только вы это сделаете, вуаля - все элементы, использующие это пользовательское свойство, будут обновлены одним изменением!

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Вот как должен выглядеть ваш первый проект:

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"d7185c95-52e4-5714-ae99-17ea7538548f","width":895,"height":140,"size":18806,"type":"png","color":"dbdbdb","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQYI/8QAJhAAAQMCBgAHAAAAAAAAAAAAAQIDBQQGAAcREhMxFiElUVVh0f/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/EABgRAAMBAQAAAAAAAAAAAAAAAAABAhES/9oADAMBAAIRAxEAPwDSOS942rnJZdVesZ4pjWV1zketh+TccUhxsJO5HGogDQjzH3hTLt4gXShay9VYkbuPrtxd/KO/uCb0hO1oOEt6KEfAQ9DG0vIpfBR06GW9x7O1AA1OneIQtoPYYiP/2Q=="}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Вы можете получить доступ к полному исходному коду и посмотреть живое превью этого проекта с этого CodePen.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Проект 2: Отзывчивая форма входа в систему"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В нашем втором проекте мы создадим отзывчивую форму входа в систему, которая загружает некоторые значения настроек из переменных CSS. Как функция media query динамически переключает стандартные свойства CSS, так же она переключает и пользовательские свойства, поэтому мы можем присваивать переменным разные значения в разных точках разрыва отзывчивости.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Сначала добавьте следующее содержимое в новый HTML-документ:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n\n\n\n \n \n \n Responsive design with CSS variables\n\n\n\n

\n \n \n \n

\n\n\n","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Здесь мы создали простую форму входа в систему, состоящую из двух элементов ввода и кнопки. Добавьте следующий тег стиля в этот HTML-документ, чтобы придать ему правильный стиль:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"bc5ba71f-debb-577b-921b-f9554caf9394","width":894,"height":190,"size":42621,"type":"gif","color":"323232","hash":"","external_service":[],"duration":5.55,"isVideo":false,"has_audio":false}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Мы можем просто сделать эту страницу отзывчивой, написав некоторые корректировки стиля - т. е. изменив направление сгибания - внутри точек разрыва медиазапроса. Для свойств, основанных на значениях padding или font-size, мы можем использовать переменные CSS вместо повторяющегося написания свойств CSS, чтобы улучшить читаемость и удобство работы с определениями CSS.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Посмотрите на предыдущий фрагмент CSS: вы заметите три переменные CSS. Замените эти переменные блоками media query и завершите код отзывчивой обработки экрана с помощью следующего фрагмента кода:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"/* --- tablets --- */\n@media screen and (min-width: 601px) and (max-width: 900px) {\n :root {\n --form-box-padding: 20px 12px 20px 12px;\n --form-box-flex-gap: 12px;\n --form-input-font-size: 14px;\n }\n\n .form-box input,\n .form-box button {\n display: block;\n width: 100%;\n }\n}\n\n/* --- mobiles --- */\n@media screen and (max-width: 600px) {\n :root {\n --form-box-padding: 24px;\n --form-box-flex-gap: 12px;\n --form-input-font-size: 20px;\n }\n\n .form-box {\n flex-direction: column;\n }\n\n .form-box input,\n .form-box button {\n display: block;\n }\n}","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"--form-box-padding: 24px;\n--form-box-flex-gap: 12px;\n--form-input-font-size: 20px;","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Протестируйте этот проект, изменив размер окна браузера:

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"9b61f025-a349-5406-b707-e40d7d5841b3","width":894,"height":272,"size":103410,"type":"gif","color":"333333","hash":"","external_service":[],"duration":10.35,"isVideo":false,"has_audio":false}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Переменные CSS помогают упростить создание веб-сайтов и сложных анимаций, позволяя при этом писать многократно используемый и элегантный код. Использование переменных CSS также возможно в проектах React Native, которые работают на веб-рендере React Native.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В нашем телеграм-канале еще больше информации

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":1,"favorites":0,"reposts":0,"views":676,"hits":909,"reads":null,"online":0},"dateFavorite":0,"hitsCount":909,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/dev/1241235-kak-ispolzovat-peremennye-v-css-nuzhny-li-sass-i-less","author":{"id":3508410,"name":"Работяги","nickname":null,"description":"Работяги это сообществе, в котором ты можешь поделиться своими проблемами в разработке и найти интересующие тебя вопросы из сферы IT.","uri":"","avatar":{"type":"image","data":{"uuid":"2d841af7-30ae-505a-ab3e-b682ff04f842","width":981,"height":980,"size":49262,"type":"jpg","color":"ebebeb","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAAKAAoDASEAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAwQGCP/EACIQAAIBAgYDAQAAAAAAAAAAAAECAwQRAAUHISJBBhJRkf/EABUBAQEAAAAAAAAAAAAAAAAAAAED/8QAHREAAgIBBQAAAAAAAAAAAAAAAAECESEDEjFBsf/aAAwDAQACEQMRAD8At9TNTfMsk1QzDLaLMahKGBokVUowFYW5BfcHfc3axB2t1jQtLmlPLTRS2l5oG5RkHcdjrDiq7LakFtU4rD9XI08ELN7NFGT9Ki+CBV+D8wET/9k="}},"cover":{"cover":{"type":"image","data":{"uuid":"6ef64be1-c33a-5270-8b36-d8f2d806a945","width":1920,"height":560,"size":218183,"type":"jpg","color":"353e51","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAACQYI/8QAIhAAAQQCAQQDAAAAAAAAAAAABQECAwQGBxIICRETABYj/8QAGAEAAgMAAAAAAAAAAAAAAAAAAwUAAgT/xAAkEQACAgICAQMFAAAAAAAAAAABAgMRABIEMRMFIWEiUlOi0f/aAAwDAQACEQMRAD8AeIT3MernZhDaoHTOmhmR5rp57yeQ4hdwDMbmS3RNc7jwIBjZ6uMOzjx2ZkGlMiKkqVJo6vXkD/jbip07flw/pp40EU/KSSOLkhl48jjQOwVHMi2FDJqRR+oE3QxeeZJJJKIo1UxsS0Y2OqlqVCSxNgEgWTde57OaKZ1c9wCZjJk6caMCStbIkEmr9jyPhR6I5InyfaIvY+NF4Of64+StV3Bnnii/xw/k/Zf5l/LyPsA+Nevj3OLRUBhBpsuVHBxdAoaQShglSH1KpAslNb7aiE7kEMdi+lVs87ayWpJfQk0qRcUkf5G0kjIiM7siFtEZmKptreqk0t0LoC6F9ZtCqCxCgEgWaFmiKs9ns5SfB5M//9k="}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":1972155,"userId":3508410,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1972155"}],"lastModificationDate":1764919540,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":235819,"name":"Разработка","description":"Сообщество разработчиков: публикации о личном опыте, выдающиеся приёмы при решении рутинных задач, полезные материалы для профессионального роста.","uri":"/dev","avatar":{"type":"image","data":{"uuid":"fef5b5fb-e488-5b7f-8445-e3a26a910b44","width":1200,"height":1200,"size":7757,"type":"png","color":"343434","hash":"04042b2b1c1000","external_service":[]}},"cover":{"type":"image","data":{"uuid":"2a214cc5-35cc-58ca-bc07-fc1c892d2101","width":960,"height":280,"size":177,"type":"png","color":"343434","hash":"","external_service":[]}},"lastModificationDate":1642411346,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"dev","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}}],"ogTitle":null,"ogDescription":null,"isAnonymized":true}};