Могу ли я поместить переменные внутри литерального CSS в стилусе? - PullRequest
Новая
       3

Могу ли я поместить переменные внутри литерального CSS в стилусе?

3 голосов
/ 21 февраля 2012

У меня есть функция в стилусе, которая выглядит следующим образом 

// Shortcut for top-down gradient background color
td_gradient(color1, color2)
    background-color (color1 + (color2 - color1) / 2)
    background -webkit-gradient(linear, 0% 0%, 0% 100%, from(color1), to(color2))
    background -webkit-linear-gradient(top, color1, color2)
    background -moz-linear-gradient(top, color1, color2)
    background -ms-linear-gradient(top, color1, color2)
    background -o-linear-gradient(top, color1, color2)
    @css
    {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=color1, endColorstr=color2);
    }

Я должен обернуть стиль градиента Internet Explorer внутри литеральной области видимости css @css, иначе он вылетит стилусом. Возможно, слишком много двоеточий или что-то в этом роде. В любом случае переменные color1 и color2 воспринимаются буквально внутри области видимости css, что нарушает стиль.

Каким образом я могу получить область действия CSS для анализа переменных? Или есть способ, которым я могу получить стиль фильтра внутри стилуса, не используя буквальный объем CSS?

1 Ответ

6 голосов
/ 21 февраля 2012

Вот один из способов: 

filter s('progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr=%s, EndColorstr=%s)', color1, color2))

Но я призываю вас проверить nib , также TJ. В частности, он создал миксин, который автоматически генерирует изображение градиента в png и base64-кодирует его в таблицу стилей. Единственное предостережение в том, что вам нужно указать высоту (или ширину для горизонтальных градиентов), но это должно подойти для вашего td: s.

ОБНОВЛЕНИЕ: Немного чище: 

filter 'progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr=%s, EndColorstr=%s)' % (color1 color2)
...