rarouš.weblog

Před Vánocema jsem slíbil seriál o tom, jak napsat redakční systém nad ASP.NET MVC pomocí TDD. Mám pár dílů na disku, tak proč nejsou venku?

No při psaní jsem narazil na pár problémů, ať je to ještě nezralost ASP.NET MVC, nedostatek času a tak. Rozhodně však nejde o další mrtvý projekt. Pokusím se ho dopsat společně s návazností na NForms a CSSX, protože to jsou věci, od kterých si slibuju mnohem jednodušší a rychleší tvorbu webíků.

Ale psát kód a zároveň tvořit článek, kterému by rozuměl i macík, je dost časově náročné. A protože musim chodit občas pařit, nebou skouknout nějakej ten film a nebo prostě jenom relaxovat, tak asi blognu až jenom finál…

Přišli jste sem z RSS čtečky? Zkontrolujte si prosím, zda máte správnou URL feedu http://feeds.feedburner.com/rarous-weblog. Děkuji

Tento člán je pouze spekulativní, píšu ho, abych si utřídil myšlenky a rozvedl jeden možná úplně blbý nápad.

Jak tak pročítám weblůžky narazil jsem na dva články: What I’m missing in CSS a Parametrizované CSS. A uvědomil jsem si, že podpoře lepšího psaní CSS, nebo spíš jeho použitelnosti a usnadnění práce kodérů, se moc pozornosti nevěnuje.

Rozhodl jsem se, že bych mohl napsat vlastní preprocesor pro asp.net, který rozšíří syntaxi CSS o některé nové možnosti, ale zůstane zpětně kompatibilní s lexikálními pravidly CSS. Preprocesor by měl také umožňovat komprimaci stylopisu, jak textovou, tak GZip. Měl by umět slučovat importované stylopisy a snížit tak počet http požadavků. Dále cachování a další nezbytnosti. :)

Proměnné

Prvním vylepšením CSSX jsou proměnné, které se definují na začátku dokumentu (kvůli lepší přehlednosti). Deklarace proměnné začíná zavináčovým pravidlem @var následuje název proměnné začínající na znak dolaru, např. $firemni-modra následuje dvojtečka a přiřazená hodnota. Deklaraci uzavírá středník. V praxi to může vypadat třeba následovně:

/* definice proměnných */
@var $firemni-modra: #2465B7;
@var $firemni-zelena: #A0B424;

a{color:$firemni-modra;}
a:hover{color:$firemni-zelena;}

/* další pravidla… */

V syntaxi využívám lexikální pravidla CSS, např. to, že neznámá zavináčová pravidla jsou ignorována až k následujícímu středníku nebo se ignoruje následující blok uzavřený ve složených závorkách.

Podmínky

Podmínky slouží k definování podmíněného bloku pravidel. Podmínky se definují pomocí zavináčového pravidla @if následovaného symbolem a blokem s definicemi:

@if IE6 {
/* pravidla pouze pro IE6 */
}

@if BLUE {
/* pravidla pro pozadavek  style.cssx?symbols=blue */
}

Symboly jsou definovány jednak pomocí „browser caps“ z asp.net a druhak pomocí GET parametru symbols. Podmínky jsou proto vhodné pro validní hackování stylopisu pro určité prohlížeče nebo pro skinování. Užití určitě může být povícero.

Pokud máte další nápady na rozšíření nebo vylepšení mých návrhů, klidně to písněte do komentářů, diskusi se nebráním. :)