Как передавать в переменной CSS значение свойства inherit?

Question

На примере ниже:

.pl_inherit: var(--inherit) = inherit = не работает...
.pr_inherit: inherit = работает.

Как пофиксить?

:root {
  --inherit: inherit;
}

.pl_inherit {
  padding-left: var(--inherit);
}

.pr_inherit {
  padding-right: inherit;
}

.parent {
  background-color:red;
}

.parent__child {
  background-color: green;
}

<div class="parent" style="padding-left:30px; padding-right: 30px">
  <div class="parent__child pl_inherit pr_inherit">123</div>
</div>

Answer 1

Провел несколько тестов, возможно, окажется полезным. Сразу скажу, что var(--inherit) даёт такой же результат, как и применение любой несуществующей переменной, тесты внизу, кроме этого, в sass передача inherit через переменную нормально работает, пример.

CSS свойства можно поделить на наследуемые (color, font-family, font-size и т.п.) и ненаследуемые (height, width, padding, margin, и т.п.). См. таблицу свойств (колонка Inherited), .

Важно! Ненаследуемые свойства могут быть переданы потомкам через inherit, но автоматически не наследуются потомками.

Как известно, обработка модификаторов происходит следующим образом.

Родительский наследуемый модификатор. (меньший по весу)
Класс-модификатор 1.
Класс-модификатор 2.

Модификатор 1 и модификатор 2 равны по весу, но тяжелей чем наследуемое св-во. Из двух модификаторов применится тот, который указан последним.(через атрибут style или с !important не рассматриваем, т.к. у них максимальный вес)

Что происходит, когда применяем var(--inherit) или несуществующая переменная

Происходит сброс применения одноуровневых модификаторов. Класс-модификатор 1 и 2 игнорируются и не применяются/ломаются, и используется значение модификатора при инициализации (колонка initial value).

Далее происходит стандартное поведение CSS.

на наследуемые модификаторы начинают действовать модификатор родителя
ненаследуемые просто сбрасываются на значение при инициализации.

Ниже 2 примера - для наследуемого свойства color и для ненаследуемого height.

У свойств margin, padding, font-size, font-family поведение аналогично их типу наследуемости.

Список всех свойств.

`color``

Срабатывает стандартное наследование от родителя, color от класса .child игнорируется.

:root {
  --inherit: inherit;
}

.parrent {
  color: black;
  display: flex;
  gap: 1rem;
  color: blue; /*Цвет родителя*/
}

.child {
  flex: 0 0 100px;
  height: 100px;
  background: lightgreen;
  color: yellow; /*цвет потомков*/
}

.modifier {
  color: red; /*цвет модификатора*/
}

.var-inherit {
  color: var(--inherit);
}

.var-undefined {
  color: var(--empty);
}

<div class="parrent">
  <div class="child">Обычный потомок</div>
  <div class="child modifier">Потомок с модификатором</div>
  <div class="child modifier var-inherit">var-inherit цвет родителя</div>
  <div class="child modifier var-undefined">var-undefined цвет родителя</div>
</div>

height

height сбрасывается в auto, класс .child игнорируется.

:root {
  --inherit: inherit;
}


html, body {
  margin: 0;
  padding: 0;
}

.parrent {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  height: 800px;
}

.child {
  height: 100px;
  width: 100px;
  background: lightgreen;
}

.modifier {
  height: 200px;
}

.var-inherit {
  height: var(--inherit);
}

.var-undefined {
  height: var(--empty);
}

<div class="parrent">
  <div class="child">Обычный child высота 100px</div>
  <div class="child modifier">child с модификатором высоты 200px</div>
  <div class="child modifier var-inherit">var-inherit</div>
  <div class="child modifier var-undefined">var-undefined</div>
</div>

БЛОГ НА HUSL

Как передавать в переменной CSS значение свойства inherit?

Ответы (1 шт):