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

Question

[Михаил Р.]

Приветствую!

На примере ниже:
1. .pl_inherit: var(--inherit) = inherit = не работает...
2. .pr_inherit: inherit = работает.
Как пофиксить?

Answer 1

[Ankhena]

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

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

Ну только кастомное свойство нужно нормально назвать.

Либо дочернему так прямо и писать padding-left: inherit;. Но это, конечно, зависит от того, как вы планируете дальше обращаться с этой переменной.

Comments

[Михаил Р.]

Ankhena Предположим, что html менять нельзя:

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

У Вас значение свойства inherit через переменную передается? У меня нет...

:root {
  --inherit: inherit;
}

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

.pr_inherit {
  padding-right: inherit;
}

[ambisinister One]

Михаил Р., Чтобы наследовать значение свойства у родительского элемента, надо сначала свойство родителю задать...
.Результат будет заметен только в том случае, если у родителя указанное свойство установлено.

[Михаил Р.]

ambisinister One,

Чтобы наследовать значение свойства у родительского элемента, надо сначало свойство родителю задать

В моем случае у родителя не задано свойство, которое может унаследовать ребенок?

[Ankhena]

Михаил Р., расскажите ситуацию, где это нужно делать через кастомное и обычный inherit не помогает.

[Михаил Р.]

Ankhena, это больше вопрос "интереса", почему inherit в css переменной не равен inherit как значение css свойства...

[Ankhena]

Михаил Р., очевидно потому что этой “фразой" вы говорите браузеру унаследовать значение свойства. При чем в том месте, где её определяете.
Думаю, имеет смысл почитать, что такое кастомное свойство и почему оно именно свойство, а не переменная. Обычно это написано там, где объясняется откуда взялась запись --

[Михаил Р.]

Ankhena,

вы говорите браузеру унаследовать значение свойства. При чем в том месте, где её определяете

Значит, в моем примере --inherit наследует значение :root?

[Ankhena]

Михаил Р., нет, вы уже в root пытаетесь сказать, что нужно взять предыдущее значение. А его нет и быть не может.

[Михаил Р.]

Ankhena,

нет, вы уже в root пытаетесь сказать, что нужно взять предыдущее значение. А его нет и быть не может.

очевидно потому что этой “фразой" вы говорите

Теперь, более очевидно. Спасибо!