PostCSS color-function плагин

PostCSS плагин для преобразования W3C CSS Color function в более совместимую с CSS.


Установка

$ npm install postcss-color-function
 

Использование

// dependencies
var fs = require("fs")
var postcss = require("postcss")
var colorFunction = require("postcss-color-function")

// css to be processed
var css = fs.readFileSync("input.css", "utf8")

// process css
var output = postcss()
  .use(colorFunction())
  .process(css)
  .css

Используя этот input.css на выходе получим:

body { background: color(red a(90%)) } 

Смотрите тесты с примерами.

 

Интерфейс(в соответствии с CSS сценарием)


color( [ <color> | <hue> ] <color-adjuster>* )

Список color-adjuster

  • [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] )
  • [red( | green( | blue( | alpha( | a(] '*' <percentage> )
  • rgb( ['+' | '-'] [<number> | <percentage>]{3} ) @todo
  • rgb( ['+' | '-'] <hash-token> ) @todo
  • rgb( '*' <percentage> ) | @todo
  • [hue( | h(] ['+' | '-' | '*']? <angle> )
  • [saturation( | s(] ['+' | '-' | '*']? <percentage> )
  • [lightness( | l(] ['+' | '-' | '*']? <percentage> )
  • [whiteness( | w(] ['+' | '-' | '*']? <percentage> )
  • [blackness( | b(] ['+' | '-' | '*']? <percentage> )
  • tint( <percentage> )
  • shade( <percentage> )
  • blend( <color> <percentage> [rgb | hsl | hwb]? )
  • blenda( <color> <percentage> [rgb | hsl | hwb]? ) @todo
  • contrast( <percentage>? )

Примечания

  • Некоторые методы имеют ярлыки. 
  • Может быть использованно на любом значении, на любом свойстве.
  • Некоторые значения могут использовать add/substract/scake миодификаторы или прямое значение.

Примеры

whatever {
  color: color(red a(10%));

  background-color: color(red lightness(50%)); /* == color(red l(50%)); */

  border-color: color(hsla(125, 50%, 50%, .4) saturation(+ 10%) w(- 20%));
}
 

FAQ


  • Возможна ли поддержка currentcolor для возможности применения color( current color adjuster())?

    Нет, так сделать нельзя.

 

Доверие от мировых лидеров