A
A
Alexey Nikolaev2016-06-05 17:15:45
css
Alexey Nikolaev, 2016-06-05 17:15:45

Is it possible to convert an inherit value to a specific color?

Good day.
Is it possible to convert an inherit value to a specific color (#000) in SASS? This feature would be very useful for reducing dependencies and creating more flexible code. For example, instead of option 1, write option 2 - if possible, it would be great.

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

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

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

If SASS doesn't support this feature, maybe there is a plugin for gulp\grunt? Or maybe this is supported in Stylus (I haven't worked with it yet, and I can't judge)?
I myself did not find the functionality explicitly described by me in the SASS documentation. Plugins for gulp \ grunt too.
Thanks in advance.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexey Ukolov, 2016-06-05
@Heian

This can't be done because the value depends on the resulting html structure, which is unknown at the time the css is compiled. You just need to create a variable and use it in two places.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question