LESS 1.2.0 wydany: takiego CSS-a chcielibyśmy mieć domyślnie w przeglądarkach

Zaczął się rok 2012, a kaskadowe arkusze stylów wcale nie różnią się w jakiś znaczący sposób od tego, co przeglądarki parsowały w latach dziewięćdziesiątych zeszłego wieku. Oczywiście, jest trochę nowych właściwości, za pomocą CSS kodujemy wizualne efekty, które się Håkonowi Wium Lie wówczas nie śniły, ale to wszystko wodotryski. Nie mamy zmiennych, funkcji, operatorów – utrzymanie i rozwijanie złożonych arkuszy stylów nie należy do rzeczy miłych. Dlatego powstają projekty, które mogą ułatwić życie projektantom i programistom witryn i aplikacji webowych, wypełniając luki w CSS-ie. Jednym z nich jest LESS.

Rozwijany od 2009 roku przez Aleksisa Selliera i Dmitrija Fadajewa LESS jest dynamicznym językiem arkuszy stylów, zainspirowanym projektem Sass, który uruchomić można zarówno po stronie przeglądarki (w IE, Firefoksie czy Chrome), jak i po stronie serwera JavaScriptu (node.js czy Rhino). Teraz na łamach GitHuba pojawiła się jego nowa wersja, która dodaje obsługę kilku nowych funkcji.

Najważniejsze jest wprowadzenie chronionych domieszek (czyli właściwości, które można kopiować z jednego zbioru reguł do drugiego) i dopasowywania wzorców. Pozwala ono w praktyce na budowanie wyrażeń warunkowych, przypominających w formie mechanizm CSS Media Query. Programiści mogą teraz zmieniać zachowanie domieszek przez wartość przekazywanych do nich parametrów. Przykładowo dyrektywę

@media screen and (device-height: 600px) {

można w LESS zastąpić wyrażeniem:

.mixin (@height) when (@screen) and (@height = 600px) {

Jest to jednak o wiele bardziej uniwersalne – autorzy pokazują jak zastosować takie wyrażenia warunkowe w innych sytuacjach:

@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
 box-shadow:         @style @c;
 -webkit-box-shadow: @style @c;
 -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
 .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
 color: saturate(@base, 5%);
 border-color: lighten(@base, 30%);
 div { .box-shadow(0 0 5px, 30%) }
}

Wersja 1.2.0 wprowadza też obsługę !important po wywołaniach domieszek, oraz funkcję color, pozwalającą na parsowanie ciągów heksadecymalnych jako kolorów i percentage, której zastosowanie powinno być oczywiste. Inne nowości to obsługa zmiennych w niektórych selektorach CSS, lepsze raportowanie błędów, obsługa czystej dyrektywy @keyframes oraz obsługa własności dyrektyw @media i @import.

Ulepszono także obsługę Webkitu i engine'u renderującego Internet Explorera (Tridenta), oraz poporawiono kilka błędów z poprzednich wersji. Więcej dowiecie się z GitHuba,gdzie można też pobrać LESS, oraz strony projektu.

Jak widać, rośnie zainteresowanie webowymi językami wyższego rzędu, które dając programistom bardziej rozbudowane narzędzia, na wyjściu generują standardowy kod JavaScript czy CSS. Ostatnio sporą popularność zdobywa CoffeeScript – czy LESS zdoła powtórzyć jego sukces? My w Webhosting.pl nie obrazilibyśmy się, gdyby takie atrakcje były standardowo dostępne w CSS.

źródło: github.com, lesscss.org

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

4 skomentuj »

Komentarze

#1 wujekbogdan 2012-01-12 15:00:25 0
gdyby jeszcze istniała sensowna wtyczka do netbeans...
IP: 89.68.6.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.75 Safari/535.7
#2 kavillock^® 2012-01-12 18:29:18 0
ale czy css nie jest na tyle prosty, aby go jeszcze zaśmiecać, wiadomo, jak zaczynałem pracę nikt mnie nie mógł przekonać do frameworków php

we wszystkich nowościach problemem jest różność interpretacji danych (np. problemy z svg na operze)
IP: 87.99.104.[...] Mozilla/5.0 (X11; Linux i686) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.63 Safari/535.7
#3 Bastian 2012-01-12 20:33:54 0
Dla mnie takie coś to jest zaśmecanie i mylenie pojęć, bowiem css to zbiór danych, definicje wyglądu elementów a logikę obsługują języki po stronie przeglądarki i serwera. I to nie są żadne hacki. Po prostu tak ma być.
IP: 77.255.7.[...] Mozilla/5.0 (X11; Linux i686; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
#4 hipertracker^® 2012-01-12 21:19:44 0
Jest dyskusja SCSS vs LESS, http://stackoverflow.com/questions/3133204/less-or-sass-scss-when-doing-non-ruby-projects Ja wolę SCSS (aka SASS), choćby ze względu na framework Compass http://compass-style.org/. Kombinacja SCSS do CSS, CoffeScript zamiast JavaScriptu i Haml do HTML znacznie upraszcza kod i chroni przed różnymi błędami. Np. nowy Ruby on Rails 3.x standardowo używa SCSS i CoffeScript, banalnie łatwo dodać Haml. Dosyć odważnie postawili na SASS i CoffeScript. I dobrze zrobili.
IP: 93.107.81.[...] Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:9.0.1) Gecko/20100101 Firefox/9.0.1

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.