Less Preprocesor Návod
Funkce pro operace s barvami
Některé funkce, které provádějí operace s barvami mohou mít na konci volitelný parametr, který určuje jak se bude hodnota zvyšovat. Pokud žádný argument nepředáme, tak se bude hodnota zvyšovat takto: 10% + 10% = 20%. Pokud jako parametr předáme hodnotu relative tak se bude hodnota zvyšovat takto: 10% + 10% = 11% (10% + 10% z 10%).
saturate
Tato funkce zvýší sytost předané barvy.
Parametry
- barva
- míra (0-100%)
- metoda - volitelný parametr (vysvětleno na začátku této stránky)
div {
color: saturate(hsl(90, 80%, 50%), 20%);
}
div {
color: #80ff00; // hsl(90, 100%, 50%)
}
desaturate
Tato funkce sníží sytost předané barvy.
Parametry
- barva
- míra (0-100%)
- metoda - volitelný parametr (vysvětleno na začátku této stránky)
div {
color: desaturate(hsl(90, 80%, 50%), 20%);
}
div {
color: #80cc33; // hsl(90, 60%, 50%)
}
lighten
Tato funkce zvýší světlost předané barvy.
Parametry
- barva
- míra (0-100%)
- metoda - volitelný parametr (vysvětleno na začátku této stránky)
div {
color: lighten(hsl(90, 80%, 50%), 20%);
}
div {
color: #b3f075; // hsl(90, 80%, 70%)
}
darken
Tato funkce sníží světlost předané barvy.
Parametry
- barva
- míra (0-100%)
- metoda - volitelný parametr (vysvětleno na začátku této stránky)
div {
color: darken(hsl(90, 80%, 50%), 20%);
}
div {
color: #4d8a0f; // hsl(90, 80%, 30%)
}
fadein
Tato funkce sníží průhlednost předané barvy.
Parametry
- barva
- míra (0-100%)
- metoda - volitelný parametr (vysvětleno na začátku této stránky)
div {
color: fadein(hsla(90, 90%, 50%, 0.5), 10%);
}
div {
color: rgba(128, 242, 13, 0.6); // hsl(90, 90%, 50%, 0.6)
}
fadeout
Tato funkce zvýší průhlednost předané barvy.
Parametry
- barva
- míra (0-100%)
- metoda - volitelný parametr (vysvětleno na začátku této stránky)
div {
color: fadeout(hsla(90, 90%, 50%, 0.5), 10%);
}
div {
color: rgba(128, 242, 13, 0.4); // hsl(90, 90%, 50%, 0.4)
}
fade
Tato funkce změní průhlednost předané barvy.
Parametry
- barva
- míra (0-100%)
div {
color: fade(hsl(90, 90%, 50%), 10%);
}
div {
color: rgba(128, 242, 13, 0.1); // hsl(90, 90%, 50%, 0.1)
}
spin
Tato funkce zvyšuje/snižuje hue hodnotu. Hue hodnota může nabývat hodnot od 0 do 360. Funkci spin ale můžeme předat i číslo větší nebo menší než je tento rozsah, protože funkce provádí modulo (zbytek po dělení).
Parametry
- barva
- číslo, které určuje o kolik stupňů rotovat (+ nebo -)
div {
color: spin(hsl(10, 90%, 50%), 30);
}
div {
color: #f2a60d; // hsl(40, 90%, 50%)
}
mix
Tato funkce smíchá dohromady dvě barvy.
Parametry
- první barva
- druhá barva
- procentuální balanční bod mezi barvami (defaultně 50%) - tento parametr je volitelný
div {
color: mix(#ff0000, #0000ff, 50%);
}
div {
color: #800080;
}
tint
Tato funkce smíchá předanou barvu s bílou barvou.
Parametry
- barva
- procentuální balanční bod mezi předanou barvou a bílou barvou (defaultně 50%) - tento parametr je volitelný
div {
color: tint(#ff00ff, 50%);
}
div {
color: #ff80ff;
}
shade
Tato funkce smíchá předanou barvu s černou barvou.
Parametry
- barva
- procentuální balanční bod mezi předanou barvou a černou barvou (defaultně 50%) - tento parametr je volitelný
div {
color: shade(#ff00ff, 50%);
}
div {
color: #800080;
}
greyscale
Tato funkce odstraní z předané barvy veškeré nasycení (saturation).
Parametry
- barva
div {
color: greyscale(hsl(90, 90%, 50%));
}
div {
color: #808080; // hsl(90, 0%, 50%)
}
contrast
Tato funkce určí, která ze dvou specifikovaných barev (tmavé a světlé) poskytuje lepší kontrast vůči nějaké barvě.
Parametry
- barva na které se bude testovat kontrast barev předaných v druhém a třetím parametru
- tmavá barva (defaultně černá) - tento parametr je volitelný
- světlá barva (defaultně bílá) - tento parametr je volitelný
- hranice (0 - 100%) specifikující kde je přechod z tmavé barvy na světlou (defaultně 43%) - tento parametr je volitelný
div {
color: contrast(#222222, #101010, #dddddd);
}
div {
color: #dddddd;
}