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

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

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

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

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

Синтаксическая диаграмма именования переменных и селекторов
html {
  --textColor: #000;
  --wrapperWidth: 1000px;
  --heading: 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

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

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

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

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

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

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


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

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

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

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

Как отслеживать и обрабатывать чит-коды 1 Существует ли способ проверить компетентность веб-разработчика, если сам ничего не понимаешь в этом? Принцип «не протыкал — не сделал» 4 Как менеджеру ставить задачи, чтобы ротация в команде не заставляла пережёвывать все задачи устно по 100 раз?




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

2 2 2 В бюро есть таймтрекинг для сотрудников? 5