Можно ли преобразовать цвет короткой формы (# 123) в длинную форму (# 112233) в стилусе? - PullRequest
Новая
       2

Можно ли преобразовать цвет короткой формы (# 123) в длинную форму (# 112233) в стилусе?

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

Поэтому я использую специальный фильтр IE, который требует, чтобы цвета были в длинной форме из 6 символов. Но у меня есть таблица стилей из тысячи строк, заполненная вызовами моей функции с использованием краткой формы из 3 символов. Поэтому я надеюсь, что из функции можно преобразовать краткую форму в длинную. Подойдет любая встроенная или пользовательская функция. Моя функция выглядит примерно так: 

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)
    filter s("progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr='%s', EndColorstr='%s')", color1, color2)

Цвета ввода выглядят как #333 и #123, но функция фильтра Microsoft требует #333333 и #112233. Есть ли способ удовлетворить его, не редактируя каждый экземпляр или цвет в моей таблице стилей?

1 Ответ

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

Глядя на исходный код стилуса, в lib / node / rgba.js, есть этот метод: RGBA.prototype.toString.В строке 268 мы находим: 

if (r[0] == r[1] && g[0] == g[1] && b[0] == b[1]) {
  return '#' + r[0] + g[0] + b[0];
} else {
  return '#' + r + g + b;
}

Я экспериментировал с созданием функции для вас, но я не могу вернуть цвет в виде строки для манипулирования строкой.Таким образом, самый простой способ для вас, вероятно, состоит в исправлении RGBA.prototype и удалении этого сокращения.

ОБНОВЛЕНИЕ: Хорошо, вот функция для вас: 

module.exports = function() {
    var hex = function(n) { return n.toString(16) };

    return function(style) {
        style.define('longColor', function(color) {
            return '#' + [color.r, color.g, color.b].map(hex).join("");
        });
    }
};

Если вы поместите его в файл color.js, вы можете использовать его с stylus -u ./color.js или API стилуса для JavaScript с use.Использование стилуса: 

td
  color longColor(#333)
...