При использовании CSS переменных (CSS пользовательских свойств) почему синтаксис настроек и синтаксис получения различаются? - PullRequest
Новая
       33

При использовании CSS переменных (CSS пользовательских свойств) почему синтаксис настроек и синтаксис получения различаются?

0 голосов
/ 17 февраля 2020

При использовании CSS Переменные (CSS Пользовательские свойства), почему синтаксис настройки и синтаксис получения отличаются?

Если я буду sh чтобы установить значение для --my-custom-width, я буду использовать: 

:root {
  --my-custom-width: 120px;
}

И если я получу sh, чтобы получить значение для --my-custom-width, я буду использовать функцию var() для извлечения то же значение: 

.my-div {
  width: var(--my-custom-width);
}

Почему бы нам просто не написать: 

.my-div {
  width: --my-custom-width;
}

1 Ответ

0 голосов
/ 17 февраля 2020

Используя CSS Пользовательские свойства с конца 2017 года, я, наконец, правильно понял, что они на самом деле и почему необходима функция var() ...

Они являются не (как это часто бывает) переменными, предназначенными для непосредственного представления CSS значений .

CSS Пользовательские свойства точно то, что они говорят - это новые CSS свойства , которым (пока) не присвоены значения.

В CSS, пример чего-то, что действительно приближает переменную, представляющую значение , равно currentColor.

Мы видим currentColor, представляющее значение, здесь: 

.my-div {
  border: 1px dashed currentColor;
}

Но CSS Пользовательские свойства не являются CSS переменными, которые обозначают значения , такие как currentColor,.

Вместо этого CSS Пользовательские свойства были заново изобретены, названы, null-value-properties ...

... и эти новые -Изобретенные именованные свойства с нулевым значением полностью пригодны для повторного использования. Также как width, height, color et c. они могут иметь значения, устанавливаемые и сбрасываемые в разных контекстах.

Например, 

/* My custom property is --my-custom-width but I want this
   property to hold different values in different contexts */

.left-two-thirds-of-page {
  --my-custom-width: 120px;
}

.right-third-of-page {
  --my-custom-width: 60px;
}

.my-div {
  width: var(--my-custom-width);
}

Именно поэтому необходима функция var() - она ​​не доставляет "пользовательское свойство "- он извлекает значение , которое в настоящее время хранится в пользовательском свойстве , и затем передает это значение.

Дальнейшие мысли:

Оглядываясь назад Интересно, если бы отношение имя-значение было бы немного яснее, если бы были вызваны CSS Пользовательские свойства : 

CSS Custom Property Names

и соответствующая функция была вызвана: 

value()

, поэтому синтаксис был бы записан и прочитан как: 

value(--my-custom-property-name)

В качестве расширения мы могли бы использовать функцию value() (или var() функция) не только для пользовательских свойств, но и для любого свойства.

Например: 

width: value(height);
...