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)
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
- .name(1, 2, 3; something, else)
  semicolon argument separator – argumenty funkcí oddělené středníkem
Grid system:
- FRAMELESS
- Golden 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í:

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

Použití:

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

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');
?>

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:
- v modulu Boost

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:

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;
    }
}

Pro psaní komentářů se přihlašte
8963x přečteno

Tomáš Daněk