Преобразование строки определения цвета rgba в LESS в экземпляр цвета

Предположим, я проанализировал параметры миксина, и цвета предоставлены с помощью функции rgba.

Теперь я хотел бы смешать два из этих цветов, но функция LESS mix требует экземпляров параметров типа color.

Что я пробовал

... и не работает

  1. звонит color("rgba(0,0,0,.5)")
  2. mix(@first, ~"@{second}"), где @second - это строка типа rgba(0,0,0,0.5)

Как преобразовать в цвет?


less type-conversion mixins
person Robert Koritnik    schedule 28.03.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Боюсь, вы не найдете встроенной функции для этого в LESS.

Аргумент color() functions должен быть шестнадцатеричным или его сокращенным представлением.

Но вы можете дополнительно проанализировать строку с помощью javascript, чтобы

  • извлечь отдельные значения r, g, b и альфа,
  • передать отдельные значения в функцию rgba(), чтобы получить переменную цвета типа.

Вы можете сделать первый шаг в исходном синтаксическом анализе. Если вам нужно сделать все в LESS, вы можете сделать что-то вроде этого:

  @color1: "rgba(255, 255, 0, 0.5)";
  @color2: ~`@{color1}.replace(/^(rgb|rgba)\(/,'[').replace(/\)$/,']').replace(/\s/g,'')`;
  @color3: rgba(unit(`@{color2}[0]`),unit(`@{color2}[1]`),unit(`@{color2}[2]`),unit(`@{color2}[3]`));

К сожалению, строка не может быть непосредственно прочитана в rgba() или аналогичных функциях, поскольку они ожидают нескольких аргументов. Даже с экранированием строки (например, ~) вывод формируется как одна переменная (~"a, b, c" становится a, b, c и действует как отдельная строка вывода для css), поэтому нам нужно получить каждое значение индивидуально и передать его соответствующему аргументу / переменной функции rgba(). Используя функцию unit(), мы преобразуем строку в число, которое можно использовать в дальнейшем.

Например:

  @color4: mix(red,@color3);
  .test {
      color: @color4;
  }

в результате получается CSS:

  .test{
    color: rgba(255, 64, 0, 0.75);
  }
person Martin Turjak    schedule 30.03.2013
comment
Спасибо, Мартин. Этот вопрос был лишь частью проблемы, которую я должен был решить. Мне также нужно было разобрать аргументы, и в конце концов я решил просто вручную смешать два цвета. Вы можете прочитать всю запись в блоге об этом. Если у вас есть дальнейшие предложения, вы всегда можете прокомментировать сообщение. - person Robert Koritnik; 01.04.2013