Ostatnio mocno zainteresowałem się rozszerzeniem CSS jakim jest LESS. Idea – rozszerzenie funkcjonalności CSS o zmienne, style zagnieżdżone, operacje i inne przydatne rzeczy. Jak to działa – dla niewtajemniczonych: Piszemy sobie styl w LESSie, a następnie kompilujemy nasz styl i otrzymujemy wynikowy plik CSS. Nie jest to żaden konkretny standard i dzieje się po stronie serwerowej – tylko i wyłącznie.

Dla przeglądarki pliki LESS byłyby bowiem raczej nie do sparsowania. Patrząc na to z szerszej perspektywy to wydaje się to być popierdółką w skali tworzenia całego portalu oraz, że można by używać internetowych kompilatorów LESS (jak np. demko LESSPHP) w procesie tworzenia strony internetowej. Jednak na dłuższą metę byłoby to raczej uciążliwe i łatwo byłoby popełnić błąd. Dlatego dobrze jest taki proces zautomatyzować :)

Standardowo projekt LESS opiera się na wykorzystaniu Ruby, którego ja dla odmiany nie zamierzam używać, więc o nim nie będę się wypowiadać; na szczęście istnieją inne projekty udostępniające omawianą funkcjonalność na inne platformy. Tu warto wymienić: LessPHP i LESS for Java oraz kilka podejść dla .NET, o których powiem szerzej za chwilkę.

Pisząc pod platformę .NET można zrobić kilka rzeczy – napisać sobie ConsoleApp’a, którego będziemy odpalać co jakiś czas, żeby nam  sam przeprowadził kompilację wszystkich plików LESS w projekcie. Wykorzystać można do tego projekt DotLess. Można też być nieco fajniejszym i użyć czegoś takiego jak T4 – czyli *Text Template Transformation Toolkit. *Jest to standardowe narzędzie Microsoftu do generacji kodu. Brzmi może trochę tajemniczo, ale wystarczy trochę tylko poprogramować np. w ASP.NET by nieświadomie tego używać :)

Mechanizm działania plików aspx używa bowiem mocno generowania kodu, co jest poniekąd logiczne, biorąc pod uwagę fakt, że jak dokonamy zmian w pliku z designem, to Visual Studio “samo” dokona zmian w plikach źródłowych pod spodem. Oczywiście nie robi tego “samo”, tylko wykorzystany zostanie do tego omawiany mechanizm. W każdym bądź razie – jak się za to zabrać by ładnie dla nas działało? W pierwszej kolejności trzeba ściągnąć sobie paczkę ze strony projektu DotLess.

W środku mamy katalog z kodem źródłowym – należy go sobie skompilować i z katalogu src\dotless.Core\bin\Debug
skopiować pliki dll w wybrane przez nas miejsce w naszym projekcie docelowym (najlepiej do jakiegoś katalogu lib). Następnie z katalogu t4less\T4CssWeb\Css kopiujemy sobie T4CSS.tt do naszego projektu (musi się znaleźć w solucji – czyli możemy po prostu przeciągnąć do Solution Explorera). Do szczęścia potrzebna nam jeszcze niewielka konfiguracja. Otwieramy w tym celu T4CSS.tt i poprawiamy:
<#@ assembly name="dotless.Core.dll" #> zastępując na: <#@ assembly name="$(ProjectDir)/lib/dotless.Core.dll" #>

Warto jeszcze sobie ustawić:

_minimize = true; 
_runOnBuild = true; 
_useCssExtension = true;

Dzięki czemu nasze pliki LESS będą się nazywać nazwa.less.css (mniej problemów przy edycji dzięki temu będziemy mieli). Pliki wynikowe będą po prostu bez “less”. Oraz będą pozbawione niepotrzebnych spacji, tabulatorów, enterów, itd. W momencie zapisu zmian, plik zostanie wykonany i pliki less zostaną przetworzone.

W przypadku błędu: “Metadata file 'dotless.Core.dll' could not be found” należy jeszcze raz zweryfikować ścieżkę do tego pliku. Aby samemu ponownie wykonać ten proces, wystarczy prawym przyciskiem kliknąć na T4CSS.tt i znaleźć opcję “Run Custom Tool”. To tyle na dziś. W najbliższym czasie wrzucę może notkę o T4 w ASP.NET MVC i o tym jak się tam sprawuje, oraz długo już odkładaną notkę o wyjeździe do Norwegii xD

Referencje

Artykuł o T4 i ASP.NET MVC

Less Css Project

Code Generation and Text Templates

DotLess