<?php
protected function createComponentCss()
{
    $css = new CssLoader;

    // cesta na disku ke zdroji
    $css->sourcePath = WWW_DIR . "/css";

    // cesta na webu ke zdroji (kvůli absolutizaci cest v css souboru)
    $css->sourceUri = Environment::getVariable("baseUri") . "css";

    // cesta na webu k cílovému adresáři
    $css->tempUri = Environment::getVariable("baseUri") . "webtemp";

    // cesta na disku k cílovému adresáři
    $css->tempPath = WWW_DIR . "/webtemp";

    //doporučené (a logické) pořadí, nepřehazovat
    $css->filters[] = array(new OneLineCommentsFilter);
    $css->filters[] = array(new RemoveCommentsFilter);
    $css->filters[] = array(new MixinsFilter);
    $css->filters[] = array(new VariablesFilter);
    $css->filters[] = array(new NestingFilter);
    $css->filters[] = array(new CompressFilter);

    return $css;
}
?>

Použití v template

{control css 'screen.css'}, ale dokonce i {control css 'screen.css', 'print.css', 'extra.css'}

Ukázky

přímé dědění

.parent {
    color: red;

    .child {
        color: blue;
    }
}

se přepíše na

.parent {
        color: red;
}

.parent .child {
        color: blue;
}

proměnné

@hodnota: 50px;
.header {
        font-size: @hodnota;
}

vznikne

.header {
        font-size: 50px;
}

mixins

.mixin (@color, @width: 5px) {
    background-color: @color;
    border-left: @width black solid;
    padding-left: @width;
}

.mixin_example {
    .mixin(#DDD, 20px);
}

vygeneruje

.mixin_example {
    background-color: #DDD;
    border-left: 20px black solid;
    padding-left: 20px;
}

komenty

.comments {
        /*
         * Multiline comment
         */

        //one line comment
}

se přepíše na

.comments {
        /*
         * Multiline comment
         */

        /* one line comment */
}

případně s filtrem na promazávání komentářů na

.comments {
}

Editoval Mikulas Dite (21. 3. 2010 20:09)

Honza Kuchař · 2. 3. 2010 10:49

Hezké. ;)

Nechceš to přidat do extras?

Editoval honzakuchar (4. 3. 2010 21:36)

Ondřej Brejla · 2. 3. 2010 11:39

OT: A nechceš se naučit editovat svůj poslední krátký příspěvek? Místo spamování novým postem…;-)

Editoval Ondřej Brejla (2. 3. 2010 11:39)

Mikulas Dite · 2. 3. 2010 12:51

honzakuchar napsal(a):

Nechceš to přidat do extras.

Našel sem ještě drobné chybky v rozkladu dědění, až zmizí a trošku to přepíšu, tak snad.

jtousek · 10. 3. 2010 8:45

Vývojově mnohem dál je tato verze LESS – je to kompletně napsané v PHP.:

http://leafo.net/lessphp/

A zde ještě vývojová verze.:

http://github.com/leafo/lessphp

Původní LESS oproti tomuhle již poněkud zastaral a navíc tohle v PHP se nám hodí víc. ;)

Mikulas Dite · 10. 3. 2010 9:59

Ej, super, dík! Když si chvilku najdu, takt to na webloader napojim.

Mimochodem, myslíte, že by stálo za to vytvořit browser filter? Něco na styl

~firefox color: #000000;

by se propagoval jenom do firefoxu, do ostatních by se smazal. Tohle by se cachovalo (počet cache souborů = počet filtovaných browserů).

Dá se napsat i něco na styl ~alpha co vloží tuhle část jenom do prohlížečů co podporujou alfu (rgba, shade, atp.) a podobné.

Editoval Mikulas Dite (10. 3. 2010 10:02)

jtousek · 10. 3. 2010 10:03

Myslím, že to není špatný nápad, ale asi by to muselo být alespoň částečně implementované přímo v LESS.

Ondřej Mirtes · 10. 3. 2010 10:20

IMHO by se to dalo zařídit pomocí spolehlivých CSS hacků.

IE6:

_height: 100px;

IE6 + IE7:

&height: 100px;

Pouze IE7:

&height: 100px;
_height: původní hodnota;

IE8:

.prvek_na_kterem_chci_aplikovat {
        height /*\**/: 100px\9
}

Webkit (Safari + Chrome):

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* uvnitř už se aplikují všechny styly jen na Webkit */
.prvek_na_kterem_chci_aplikovat {
        height: 100px;
}
}

Bylo by hezké, kdyby LESS umělo tyhle fíčury: http://css3please.com/ :)

Editoval Ondřej Mirtes (10. 3. 2010 10:21)

Mikulas Dite · 10. 3. 2010 10:31

Ok, klidně by tohle mohl ten filtr vkládat, byl by to jeden cache soubor, ale psalo by se to jenom jednou čistě (a všude stejně). Nerozumím zmínce http://css3please.com/, asi by bylo nejsnažší to udělat přes mixin, něco na styl mixin inline-css funkce vložBorder() a tam to bude rozepsané s vendor prefixy a hacky pro iečka.

Editoval Mikulas Dite (10. 3. 2010 10:38)

Ondřej Mirtes · 10. 3. 2010 10:36

No že kdyby někdo napsal nějakou vlastnost z CSS3, tak by se vygenerovala a rozepsala se všemi vendor prefixy a filtry pro IE :)

Mikulas Dite · 10. 3. 2010 10:40

Jasný, myslíš jako to rozepsat automaticky… Určitě ne rovnou do pLESS kódu, udělám na to nějaké předpřipravené mixins. Konec konců, tohle je všechno beta, takže se to může docela často měnit – přímo v kódu by se to pak editovalo hůř.

jasir · 10. 3. 2010 11:07

Tohle znáte? Nějakou dobu sleduji a přemýšlím, zda použít či ne…

http://github.com/…ab/README.md

Mikulas Dite · 10. 3. 2010 11:23

\\Pak je taky dobrá Rosemary, ale je to čuňácky napsaný. bigspaceship

Nejradši bych použil to co poslal jtousek, ale nějak to rozdělim do WebLoader filtrů. Potom tam bude rychlý přidávat další fce. V tom csscaffoldu je navíc asi jenom firelog, time a flags. Sice skoro zbytečnosti, ale otevírá to prima monosti, takže to tam asi přidám taky.

Editoval Mikulas Dite (10. 3. 2010 11:23)

gawan · 10. 3. 2010 11:23

ja zase používam na podobné účely xccs a som s tým spokojný a funguje to bez problémov.

Mikulas Dite · 10. 3. 2010 17:18

jtousek napsal(a): Vývojově mnohem dál je tato verze LESS – je to kompletně napsané v PHP.: http://leafo.net/lessphp/

Uf, původně sem myslel, že to svoje nahradim timhle, ale má to přes 1000 linek a funkce to volá přímo s referencí. Navíc to nezvládá filter tag (vůbec syntax key: value: foo) a chybí tam způsob na vkádání @variable do textů, což u ie filtrů nejde obejít. Vidim to tak, že radši rozšířim a vylepšim ty moje filtry. (A jsou mimochodem i rychlejší ;)

jtousek · 10. 3. 2010 20:03

Mikulas Dite:

Vývojová verze 2.0 už filter v pohodě zvládá a záležitosti se string proměnnejma + mnoho dalších věcí jsou dávno opravené a funkční. Vážně si nemyslím, že bys mohl jen tak napsat něco lepšího. ;)

gawan:

Less má řádově víc funkcí než xcss.

jasir:

Znám, a opět platí: Less je lepší.

Ondřej Mirtes:

Naprosto jednoznačně vyřešit přes mixiny.

Editoval jtousek (10. 3. 2010 20:08)

Mikulas Dite · 10. 3. 2010 20:42

Popravdě, z tohohle repa jsem to stahoval a ani jedno z toho co sem psal tam nefunguje. (Ale přece jenom, radši to ověřim.)

jtousek · 10. 3. 2010 21:04

OK zkusil jsem to sám, a máš pravdu, že filter nefunguje. Dám to autorovi na github jako issue. (Já filtry nepoužívám, jen vím, že byl dříve problém se závorkami v hodnotě – což už je ok)

//EDIT 12.3.2010: Autor již problém s filtrem pro IE odstranil a vše funguje.

Editoval jtousek (12. 3. 2010 8:54)

wotaen · 16. 3. 2010 9:23

Vypadá to super, trochu problém vidím při ladění ve firebugu, nešlo by ke každému pravidlu z vytvořeného CSS přidat do komentáře na kterém řádku se vygenerovalo? Nebo to řešíte nějak jinak?

Mikulas Dite · 16. 3. 2010 10:54

Nó… Těžko říct, až to bude plně funkčí, tak je žádoucí mít output co nejkompresovanější a zaarchivovanej, takže cokoliv navíc je tam zbytečně. Pro testování css můžeš filter pro kompresi vypnout, zpětně dohledatelné to bude i tak v pohodě.

wotaen · 16. 3. 2010 11:41

Mikulas Dite napsal(a):

Nó… Těžko říct, až to bude plně funkčí, tak je žádoucí mít output co nejkompresovanější a zaarchivovanej, takže cokoliv navíc je tam zbytečně. Pro testování css můžeš filter pro kompresi vypnout, zpětně dohledatelné to bude i tak v pohodě.

Tak potom to rozlišit podle módu. Na lokále to bude generovat všechny možné komentáře včetně řádků kódu a na produkčním to bude zkomprimované čisté css

Mikulas Dite · 21. 3. 2010 20:12

Přidal jsem originální lessphp, má plnou podporu cachování atd. a umí to co původní verze: github:lessphp.

A má předepsané mixiny tríčků z css3please.

Download

http://bit.ly/aU4z2y

Oggy · 12. 4. 2010 10:25

Můžu poprosit o návod.. je potřeba nyní registrovat filtry?

třídy OneLineComment atd nevidím..

kdy volat applyfilters..aby se aplikoval mixins? a co má tahle metoda za parametr? $s..

Mikulas Dite · 12. 4. 2010 12:47

Přiklonil sem se k phpless – filtry se tedy spouští automaticky (a zatím nejdou selektivně vypnout). API je z hlediska použití snad stejné jako u WebLoaderu.

Oggy · 12. 4. 2010 12:52

jak tedy aplikovat styly z mixins? .. pokud jsem dal nějakému bloku třídu např. box_round a do svého css jsem definoval @topleft: 10px atd .. tak ten styl, kde jsou nadefinované proměné toho css je po generování webloaderem prázdný..

#1 1. 3. 2010 19:30

Addon WebLoader a LESS

O

Download

Oficiální demo lessphp

Filtry

Vytvoření komponenty

Použití v template

Ukázky

přímé dědění

proměnné

mixins

komenty

#2 2. 3. 2010 10:49

Re: Addon WebLoader a LESS

#3 2. 3. 2010 11:39

Re: Addon WebLoader a LESS

#4 2. 3. 2010 12:51

Re: Addon WebLoader a LESS

#5 10. 3. 2010 8:45

Re: Addon WebLoader a LESS

#6 10. 3. 2010 9:59

Re: Addon WebLoader a LESS

#7 10. 3. 2010 10:03

Re: Addon WebLoader a LESS

#8 10. 3. 2010 10:20

Re: Addon WebLoader a LESS

IE6:

IE6 + IE7:

Pouze IE7:

IE8:

Webkit (Safari + Chrome):

#9 10. 3. 2010 10:31

Re: Addon WebLoader a LESS

#10 10. 3. 2010 10:36

Re: Addon WebLoader a LESS

#11 10. 3. 2010 10:40

Re: Addon WebLoader a LESS

#12 10. 3. 2010 11:07

Re: Addon WebLoader a LESS

#13 10. 3. 2010 11:23

Re: Addon WebLoader a LESS

#14 10. 3. 2010 11:23

Re: Addon WebLoader a LESS

#15 10. 3. 2010 17:18

Re: Addon WebLoader a LESS

#16 10. 3. 2010 20:03

Re: Addon WebLoader a LESS

#17 10. 3. 2010 20:42

Re: Addon WebLoader a LESS

#18 10. 3. 2010 21:04

Re: Addon WebLoader a LESS

#19 16. 3. 2010 9:23

Re: Addon WebLoader a LESS

#20 16. 3. 2010 10:54

Re: Addon WebLoader a LESS

#21 16. 3. 2010 11:41

Re: Addon WebLoader a LESS

#22 21. 3. 2010 20:12

Re: Addon WebLoader a LESS

Download

#23 12. 4. 2010 10:25

Re: Addon WebLoader a LESS

#24 12. 4. 2010 12:47

Re: Addon WebLoader a LESS

#25 12. 4. 2010 12:52

Re: Addon WebLoader a LESS

Zápatí