x
 
Юрий Мазурский
1 августа 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

В ЦСС есть воз­мож­ность опре­де­лять пере­мен­ные (англ. Custom properties).

Объ­яв­ля­ются они так же, как любые дру­гие свой­ства внутри любого блока, но все­гда с пре­фик­сом --

Синтаксическая диаграмма именования переменных и селекторов

В назва­ниях пере­мен­ных можно исполь­зо­вать лати­ницу, цифры, под­чёр­ки­ва­ние и дефис:

Синтаксическая диаграмма именования переменных и селекторов
html {
  --textColor: #000;
  --wrapperWidth: 1000px;
  --heading-2: 30px/36px Helvetica, Arial, sans-serif;
}

Пере­мен­ной можно назна­чить любое зна­че­ние и исполь­зо­вать её в любом свой­стве. В пере­мен­ную нельзя запи­сы­вать селек­торы или сами свой­ства. Только значения.

Зна­че­ние пере­мен­ной исполь­зу­ется с помо­щью ЦСС‑функ­ции var():

body {
  color: var(--textColor);
}

Вто­рым аргу­мен­том функ­ции можно ука­зать зна­че­ние, кото­рое будет исполь­зо­вано в слу­чае, если пере­мен­ная не определена:

body {
  color: var(--textColor, #00f);
}

Пере­мен­ные доступны внутри селек­тора, в кото­ром они были опре­де­лены и во всех его потом­ках. Если опре­де­лить пере­мен­ную в гло­баль­ном псев­до­классе :root или в html, она будет доступна на всей странице.

Напри­мер, можно кра­сить все кнопки в один цвет, но отдель­ные акцент­ные кнопки — в другой:

:root {
  --buttonColor: blue;
}
.button {
  background-color: var(--buttonColor);
}
.accentButton {
  --buttonColor: red;
}

Ещё по теме ЦСС‑переменных:

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Дима Шишкин
1 августа 2019

Вот ещё можно почитать про использование кастомных свойств: https://www.smashingmagazine.com/2019/07/css-custom-properties-cascade/

Евгений Удод
1 августа 2019

Видимость ЦСС-переменных определяется каскадом, подобно свойству color или font-size.

:root определяет первый тег документа (корневой), например <html>. Потому переменная и видна во всём документе, так как все остальные теги вложены в первый.

Неважно, какому селектору вы задали переменную, — она будет доступна всем его потомкам.

https://jsfiddle.net/naykris/8hswgy3q/2/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как быть разработчикам, которые хотят получать больше денег, но не хотят разбираться в бизнесе? Что делать, если меня, технического директора, потихоньку отстраняют от дел? Типовые решения в вёрстке. Почему не стоит использовать float 2 3




Недавно всплыло

Что должен знать дизайнер об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? 9 Многоточие в кнопках в вебе и мобильных платформах 3 1 Как избежать «эффекта Тильды»? 3