LESS CSS Preprocessor

Dynamický stylovací jazyk LESS (Leaner CSS – štíhlejší CSS) umožňuje automaticky zpracovávat .less soubory připojené pomocí funkce drupal_add_css() nebo .info souboru tématu vzhledu.

LESS knihovna rozšiřuje CSS o dynamické chování např. proměnné (barvy, cesty k souborům, fonty, rozměry atd.), zanořování selektorů, matematické operace (včetně operací s barvami), funkce (vrací hodnotu), mixiny (vrací CSS) atd., čímž umožňuje zefektivnit práci. Zápis je podobný jazyku PHP nebo JavaScriptu.

  • LESS při vývoji nevyžaduje zpracování na straně serveru – pro vytvoření výsledného CSS stačí JavaScript na straně klienta
  • LESS umožňuje používat JavaScript "přímo ve stylech"
  • současná stabilní verze LESS nepodporuje definici dynamických vlastností CSS, ale již existuje požadavek na přidání této možnosti (viz less.js) no
  • import "obyčejných" CSS souborů bez nutnosti přejmenování jejich koncovky na .less
    • @import (less) "plain.css";
  • V Drupalu mi z nabízených možností LESS nefunguje:
    • @_
      any value – jakákoli hodnota no
    • .name(1, 2, 3; something, else)
      semicolon argument separator – argumenty funkcí oddělené středníkem no
  • Grid system:
  • více viz SASS vs LESS

Poznámky:

  • česká dokumentac Less
  • editory podporující Less a Sass:
    • Espresso, Eclipse, VIM, Emacs, Sublime Text 2, TextMate, NetBeans, WebStorm, Visual Studio, PyCharm, RadRails, RubyMine, Komodo, Coda, GEdit atd.
  • rozšíření
    • FireFox
      • FireLess, FireSass
  • kompilátory:
    • Mac: SimpLess, Compass.app, Scout, Crunchapp, LiveReload, CodeKit, Less.app
    • Linux: SimpLess, Compass.app, Scout, Crunchapp
    • Windows: SimpLess, Compass.app, Scout, Crunchapp, LiveReload, WinLess
  • LESS obsahuje i náznak struktur – v jmenném prostoru lze definovat proměnné či konstanty a k nim pak přistupovat jako k hodnotám:
    • #default {@width: 960px;}
      .article {color: #ff0000;}
      .comment {
        width: #defaults[@width];
        color: .article['color'];
      }

Instalace a nastavení:

  1. Modul:
    1. Nainstalujte modul Libraries API.
    2. Stáhněte knihovnu lessphp-0.4.0 a rozbalte ji tak, že soubor 'lessc.inc.php' bude umístěn v 'sites/all/libraries/lessphp/lessc.inc.php'.
    3. Nainstalujte modul LESS CSS Preprocessor 7.x-3.0.
    4. Při vývoji tématu v Nastavení, Vývoj, LESS settings (admin/config/development/less)
      • zapněte LESS developer mode
      • zapněte LESS watch mode enlightened
  2. Použití:
    1. Téma vzhledu:
      • K používanému tématu vzhledu si připojte požadované .less soubory:
      • stylesheets[all][] = styles/my_style.css.less
        
        ;For automatic variable and function association with non globally added stylesheets
        less[sheets][] = relative/path/to/stylesheet.css.less
    2. Vlastní modul
      • K modulu si připojte požadované .less soubory:
      • <?php
        $module_path = drupal_get_path('module', 'my_module');
        drupal_add_css($module_path . '/styles/my_module.css.less');
        ?>
  3. Instrukce pro IDE Eclipse.

Podobné moduly:

  • SASS – zápis je podobný jazyku Ruby on Rails nebo HAML
  • Stylus – pro ty, kteří si chtějí psát "všechno sami" a mít vše pod kontrolou
  • xCSS
  • Css Dry

Další moduly:

  • Live CSS – online editace vzhledu (Pokud používáte současně i modul LESS, zakažte integrovanou LESS podporu v administraci modulu Live CSS!)

Poznámky:

  • LESS je podporováno:

Media Queries

A) Běžný způsob media queries v Less preprocessoru:

@mobile: ~"all and (max-width: 767px)";
@tablet: ~"all and (min-width: 768px) and (max-width: 979px)";
@normal: ~"all and (min-width: 980px) and (max-width: 1199px)";
@wide: ~"all and (min-width: 1200px)";
.style-article-featured {
  width: 100%; // Mobile first
  @media @tablet {
    width: 80%; // Tablet
  }
  @media @normal, @wide {
    width: 50%; // Normal & Wide
  }
}

B) Media queries reagující na velikost písma: yes

Další výhodou preprocesorů je např. i možnost psát média queries přímo ke konkrétnímu prvku (není tedy nutné rozdělovat dokument na sekce dle media queries) tzv. mikrokoncepce (mikrobreakpointy):

Zdroj (před kompilací):

/* Media queries */
@mobile: ~"(max-width: 43.99em)";
@tablet: ~"(min-width: 44em)";
@tablet_only: ~"(min-width: 44em) and (max-width: 69.99em)";
@desktop: ~"(min-width: 70em)";
@desktop_only: ~"(min-width: 70em) and (max-width: 209.99em)";
@tv: ~"(min-width: 210em)";

/* Media queries belongs to the content! */
nav {
  /* ...CSS A)... */ // Mobile first
  @media @tablet {
    /* ...CSS B)... */ // Tablet
  }
  @media @tablet_only {
    /* ...CSS B2)... */ // Only Tablet
  }
  @media @desktop, @tv {
    /* ...CSS C)... */ // Normal & TV
  }
}

Výsledek (po kompilaci):

/* Media queries belongs to the content! */
nav {
  /* ...CSS A)... */
}
@media (min-width: 44em) {
  nav {
    /* ...CSS B)... */
  }
}
@media (min-width: 44em) and (max-width: 69.99em) {
  .region {
    /* ...CSS B2)... */
  }
}
@media (min-width: 70em),(min-width: 210em) {
  nav {
    /* ...CSS C)... */
  }
}

Retina display

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile: ~"only screen and (max-width: 320px)";

.logo {
    background: url(/static/images/logo.png) no-repeat 0 0;

    @media @highdensity, @mobile {
        background-image: url(/static/images/logo@2x.png);
        background-size: contain;
    }
}