Dzisiaj kolejna przydatna konstrukcja LESS. Często zachodzi potrzeba stworzenia klasy na podstawie kilku innych klas. Załóżmy, że mamy: .class1 { color:red; } .class2 { font-size:10px; } .finalClass { color:red; font-size:10px; border-color:blue; } FinalClass składa się zarówno z class1 jak i class2. Ponadto rozszerza możliwości o border-color. Za pomocą mixin możemy kod skrócić do: .class1 { color:red; } .class2 { font-siz...
Na blogu rzadko poruszam tematy CSS, ale czasami nawet jak ma się bardzo małą warstwę prezentacji, warto zainwestować trochę czasu w poznanie nowych bibliotek. Dzisiaj chciałbym przedstawić LessCss. Biblioteka stanowi pewnego rodzaju pre-processor, który rozszerza możliwości klasycznego CSS. Na wyjściu zatem pojawi się zwykły CSS, który jest obsługiwany przez wszystkie przeglądarki. Sprawą “kompilacji”, zajmiemy się w innym wpisie, ponieważ istnieje wiele sposobó...
Pokazuję metody radzenia sobie ze złożonością w arkuszach stylów CSS.
Jak pewnie wielu z Was pamięta, w jednym z ostatnich wpisów poruszyłem temat LESS czyli swego rodzaju rozszerzenia CSS, pozwalającego na re-używanie kodu, definiowanie zmiennych itp., itd. Wpis tamten zdecydowanie był jedynie wstępem do bardziej szczegółowego opisu możliwości tego rozwiązania – napisałem w końcu tylko jak zacząć używać LESS oraz pokazałem jeden prosty przykład kodu… Dziś zatem pora na znaczne poszerzenie tego tematu i więcej szczegółów dotyczących LESS… postaram się przyb...
Ostatnimi czasy dwa razy w swoich postach poruszałem temat narzędzia Bootstrap. Wspomniałem tam między innymi, że możliwe jest skonfigurowanie własnych zmiennych LESS, które możemy później używać we własnych tematach... Stwierdziłem więc, że skoro jestem już przy narzędziach takich jak Bootstrap, to warto również poruszyć ten temat i zrobić małe wprowadzenie do LESS. Jako, że temat jest dość obszerny, postanowiłem że napiszę dwa wpisy na ten temat i w kolejnym postaram się dokładniej przybliżyć możliwośc...
Dzisiaj w firmie @blackgilmore trafił na ciekawy błąd, duplikujące się style w css-ie. Mając 3 pliki less:test1.less .test1Function() { .testClass { background-color: #f00; } } test2.less @import-once "test1.less"; .test2Class { top: 1px; .test1Function(); } test3.less @import-once "test1.less"; @import-once "test2.less"; wynik powinien wyglądać tak: .test2Class { top: 1px; } .test2Class .testClass { background-color: #f00; } Jeśli jednak .tes...
Mads Kristensen odwalił kawał dobrej roboty tworząc Web Essentials. Jest to pierwsze narzędzie wspierające analizę JS, kompilowanie LESS, minimalizację CSS i JS i wiele innych rzeczy, które naprawdę mnie nie wkurza. I w większości przypadków działa. No właśnie, w większości. Dwa dni temu zacząłem przepisywać swój nowy projekt z CSS na LESS – by się go nauczyć, pobawić i w ogóle. Jednak z miejsca natrafiłem na problem, którego za nic nie mogłem obejść – przynajmniej do póki się nie zorientowałem, dlaczego...