Less Preprocesor Návod

Funkce pro definici barev

rgb

Tato funkce vytváří barvu podle červené, zelené a modré složky.

Parametry

  • červená hodnota (0-255 nebo 0-100%)
  • zelená hodnota (0-255 nebo 0-100%)
  • modrá hodnota (0-255 nebo 0-100%)
// LESS

div {
    color: rgb(0, 255, 0);
}
/* zkompilované CSS */

div {
    color: #00ff00;
}

rgba

Tato funkce vytváří barvu podle červené, zelené a modré složky a alpha hodnoty (průhlednosti).

Parametry

  • červená hodnota (0-255 nebo 0-100%)
  • zelená hodnota (0-255 nebo 0-100%)
  • modrá hodnota (0-255 nebo 0-100%)
  • alpha hodnota (1 = neprůhledné; 0 = průhledné)
// LESS

div {
    color: rgba(0, 255, 0, 0.5);
}
/* zkompilované CSS */

div {
    color: rgba(0, 255, 0, 0.5);
}

argb

Tato funkce převede předanou barvu na hexadecimální reprezentaci barvy v této podobě: #AARRGGBB.

Parametry

  • barva
// LESS

div {
    color: argb(rgba(90, 23, 148, 0.5));
}
/* zkompilované CSS */

div {
    color: #805a1794;
}

hsl

Tato funkce vytváří barvu podle hue (odstínu), saturation (sytosti) a lightness (světlosti).

Parametry

  • hue (číslo od 0 do 360 stupňů)
  • saturation (0-100% nebo 0-1)
  • lightness (0-100% nebo 0-1)
// LESS

div {
    color: hsl(90, 100%, 50%);
}
/* zkompilované CSS */

div {
    color: #80ff00;
}

hsla

Tato funkce vytváří barvu podle hue (odstínu), saturation (sytosti), lightness (světlosti) a alpha hodnoty (průhlednost).

Parametry

  • hue (číslo od 0 do 360 stupňů)
  • saturation (0-100% nebo 0-1)
  • lightness (0-100% nebo 0-1)
  • alpha hodnota (1 = neprůhledné; 0 = průhledné)
// LESS

div {
    color: hsla(90, 100%, 50%, 0.5);
}
/* zkompilované CSS */

div {
    color: rgba(128, 255, 0, 0.5);
}

hsv

Tato funkce vytváří barvu podle hue, saturation a value. Tento barevný model je k dispozici ve Photoshopu a není stejný jako hsl.

Parametry

  • hue (číslo od 0 do 360 stupňů)
  • saturation (0-100% nebo 0-1)
  • value (0-100% nebo 0-1)
// LESS

div {
    color: hsv(90, 100%, 50%);
}
/* zkompilované CSS */

div {
    color: #408000;
}

hsva

Tato funkce vytváří barvu podle hue, saturation, value a alpha hodnoty. Tento barevný model je k dispozici ve Photoshopu a není stejný jako hsla.

Parametry

  • hue (číslo od 0 do 360 stupňů)
  • saturation (0-100% nebo 0-1)
  • value (0-100% nebo 0-1)
  • alpha (0-100% nebo 0-1)
// LESS

div {
    color: hsva(90, 100%, 50%, 0.5);
}
/* zkompilované CSS */

div {
    color: rgba(64, 128, 0, 0.5);
}