Можно ли конвертировать значение inherit в конкретный цвет?

Question

[Алексей Николаев]

Доброго дня.
Можно ли конвертировать в SASS значение inherit в конкретный цвет (#000)? Эта возможность была бы весьма полезной для уменьшения зависимостей и создания более гибкого кода. Например, вместо варианта 1 написать вариант 2 - если так можно, было бы здорово.

li { // вариант 1
    color: $bullet-color; // покрасим только маркеры списка
    
    > span {
        color: $text-color; // а текст не красим
    }
}

li { // вариант 2
    $inherited-color: property-transform(inherit, 'color'); // например подобная функция, 
    // или любая другая - неважно, написал от балды для примера. 
    // Суть в том, чтобы наследуемое значение конвертировалось 
    // в конкретный цвет, который можно было бы применить ниже

    color: $bullet-color; // покрасим только маркеры списка
    
    > span {
        // тут мы уже не юзаем глобальную переменную, 
        // а очень красиво обходимся зависимостью 
        // от наследуемого цвета
        color: $inherited-color; // а текст не красим
    }
}

Если же SASS не поддерживает такую фичу, возможно, есть плагин для gulp \ grunt? Или может, такое поддерживается в Stylus (с ним я пока не работал, и не могу судить)?

Сам в документации к SASS явно описанного мной функционала не нашел. Плагинов к gulp \ grunt тоже.

Заранее спасибо.

Answer 1

[Алексей Уколов]

Это невозможно сделать, поскольку значение зависит от итоговой структуры html, которая на момент компиляции css неизвестна. Вам нужно просто завести переменную и использовать её в двух местах.

Comments

[Алексей Николаев]

Это понятно, но если так, то возможно, есть плагин на основе postCss. Поэтому я и упомянул про grunt \ gulp

[Алексей Уколов]

postcss работает опять же с css. А наследуемое значение зависит от html и может быть абсолютно любым в рамках стилей.

[Алексей Николаев]

Алексей Уколов: хм. Действительно, об этом я не подумал.