Less Preprocesor Návod

Různé funkce

color

Tato funkce převádí řetězec na barvu.

Parametry

  • řetězec, který chceme převést na barvu
@retezec-s-barvou: "#aaa";
// následující volání funkce color převede řetězec "#aaa" na #aaa
@barva = color(@retezec-s-barvou);

image-size

Pomocí této funkce můžeme získat rozměry obrázku. Pozn.: Tato funkce je v době psání této stránky k dispozici jen v node prostředí.

Parametry

  • cesta k obrázku
// pokud by měl obrázek, který používá následující funkce
// rozměry 100x100px, tak funkce vrátí: 100px 100px
@rozmery-obrazku: image-size("obrazek.png");

image-width

Pomocí této funkce můžeme získat šířku obrázku. Pozn.: Tato funkce je v době psání této stránky k dispozici jen v node prostředí.

Parametry

  • cesta k obrázku
// pokud by měl obrázek, který používá následující
// funkce šířku 200px, tak funkce vrátí: 200px
@sirka-obrazku: image-width("obrazek.png");

image-height

Pomocí této funkce můžeme získat výšku obrázku. Pozn.: Tato funkce je v době psání této stránky k dispozici jen v node prostředí.

Parametry

  • cesta k obrázku
// pokud by měl obrázek, který používá následující
// funkce výšku 100px, tak funkce vrátí: 100px
@vyska-obrazku: image-height("obrazek.png");

convert

Tato funkce konvertuje číslo z jedné jednotky na jinou. Jednotky musí být kompatibilní, pokud nejsou kompatibilní tak funkce vrátí první argument nemodifikovaný.

Parametry

  • číslo s jednotkami, které chceme převést
  • jednotky na které se má číslo předané v prvním argumentu převést

Kompatibilní skupiny jednotek

  • délka: m, cm, mm, in, pt, pc
  • čas: s, ms
  • úhel: rad, deg, grad, turn
@milisekundy: convert(9s, "ms"); // 9000 ms
@milimetry: convert(14cm, "mm"); // 140 mm
@centimetry: convert(8, "cm"); // nekompatibilní jednotky

data-uri

Tato funkce převede soubor na Data URI (data budou uložena přímo v kódu jako řetězec namísto v souboru).

Parametry

  • mimetype - tento parametr je volitelný, pokud jej nepředáme, tak se funkce pokusí mimetype určit podle přípony
  • cesta k souboru
// LESS

div {
    background: data-uri('../data/image.jpg');
}
/* zkompilované CSS */

div {
    background: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
}

default

Tato funkce je k dispozici jen uvnitř podmínek mixinů a vrací true když se žádný jiný mixin neaplikuje, jinak vrací false.

// LESS

.mixin(1) {
    color: #ffffff;
}
.mixin(2) {
    color: #000000;
}
// když se žádný předchozí mixin neaplikuje, tak se aplikuje tento
.mixin(@x) when (default()) {
    padding: unit(@x, px); // X -> Xpx
}

div {
    .mixin(3);
}

div.special {
    .mixin(1);
}
/* zkompilované CSS */

div {
    padding: 3px;
}

div.special {
    color: #ffffff;
}

unit

Tato funkce přidá nebo změní jednotku předaného čísla. Případně ji odstraní.

Parametry

  • číslo ke kterému chceme přidat/změnit jednotku
  • jednotka, kterou chceme číslu přidat/změnit - tento parametr je volitelný, pokud jej nepředáme, tak se jednotka z předaného čísla odstraní
@pixely = unit(5, px); // 5px
@cislo = unit(5em); // 5

get-unit

Tato funkce vrátí jednotku předaného čísla. Pokud číslo nemá jednotku, tak nevrátí nic.

Parametry

  • číslo z kterého chceme dostat jednotku
@jednotka: get-unit(15px); // px

svg-gradient

Pomocí této funkce můžeme vytvořit SVG gradient. Jako první argument přijímá tato funkce směr gradientu. Ostatní argumenty specifikují barvy a jejich pozice v gradientu.

Parametry

  • směr gradientu (to bottom, to right, to bottom right, to top right, ellipse enbo ellipse at center)
  • barvy - musejí být alespoň 2 - každou barvu můžeme specifikovat v samostatném argumentu, nebo můžeme předat list - za barvy předáváme procenta, která určují kde se má barva zobrazit
// LESS

div {
    // vytvoření svg gradientu a jeho použití jako obrázek pozadí
    background-image: svg-gradient(to right, red, green 30%, blue);
}
/* zkompilované CSS */

div {
    // vygeneroval se svg gradient a uložil se v Data URI formátu - pokud se chcete podívat jak vypadá, klikněte na odkaz
    background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3ClinearGradient%20id%3D%22gradient%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0000%22%2F%3E%3Cstop%20offset%3D%2230%25%22%20stop-color%3D%22%23008000%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%230000ff%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url(%23gradient)%22%20%2F%3E%3C%2Fsvg%3E');
}