LESS tutorial logo

Po kursie Bootstrapa i WordPressa postanowiłem przygotować dla Was tutorial jak korzystać z preprocesora LESS czyli Leaner CSS. Jak wiecie wszystko co związane z komputerami tak szybko brnie do przodu i pojawia się tak wiele nowości, że czasami ciężko nad nimi nadążyć. LESS jest jednym z takich usprawnień. Jego idea polega na szybszym tworzeniu arkuszy […]

Czytaj!

Przeglądarki internetowe nie są w stanie „zrozumieć” stylów zapisanych za pomocą LESSa dlatego muszą być kompilowane do standardowego pliku CSS. Istnieje wiele możliwości kompilacji, które pokrótce opiszę poniżej: Kompilacja w przeglądarce W naszym pliku index.html umieszczamy bibliotekę LESSa, która kompiluje kod pliku *.less podczas wczytywania strony. Najprostszą metodą jest skorzystanie z serwerów CDN czyli zamieszczenie […]

Czytaj!

Każdy z Was, kto miał jakąś styczność z programowaniem zapewne wie czym są zmienne i do czego służą. Pozwólcie, że wyjaśnię tym, którzy dopiero zaczynają swoją przygodę. Zmienna jest takim elementem, który pozwala przypisać sobie jakąś wartość a następnie odwoływać się do siebie wewnątrz kodu. Przykładowo liczba  π w przybliżeniu ma wartość 3,14159. Wyobraźmy sobie, że piszemy […]

Czytaj!

Domieszki jak sugeruje nazwa pozwalają „dołożyć” coś do naszych stylów. Są one swego rodzaju agregatorami często wykorzystywanych właściwości (coś jak klasy CSS z tym, że jedną domieszkę można umieścić wewnątrz drugiej domieszki). Przykładowo, chcemy stworzyć sobie diva z zaokrąglonymi rogami. Jak wiemy, w tym przypadku, musimy stworzyć trzy właściwości CSS z odpowiednimi prefiksami:

Zamiast […]

Czytaj!

Jak wiecie w CSSach możemy się stylować elementy potomne, przykładowo mamy diva który zawiera nagłówek, treść i obrazek. Jego struktura HTML wygląda następująco:

Aby ostylować jego kolejne elementy nasze reguły CSS muszą wyglądać następująco:

Za pomocą LESSa oraz jego zagnieżdżeń jesteśmy w stanie zrobić to bardziej zwięźle i czytelniej a wygląda to tak: […]

Czytaj!

Jak wiecie, responsive web desing jest już standardem. W związku z tym jesteśmy zmuszeni do korzystania z media queries podczas tworzenia naszych stron. Wiecie też, że stylując jeden element dla poszczególnych rozdzielczości, trzeba kopiować jego nazwę kilkukrotnie. LESS pozwala tego uniknąć za pomocą zagnieżdżania media queries wewnątrz siebie a następnie rozwijanie ich podczas kompilacji do […]

Czytaj!

Jak wiecie CSS nie ma możliwości wykonywania operacji arytmetycznych. No może nie do końca bo CSS3 udostępnia zapis calc(); ale jest on jeszcze dopracowywany i nie pozwala robić wszystkich działań. Tutaj z pomocą przychodzi nam LESS, który pozwala na dodawanie, odejmowanie, dzielenie, mnożenie a nawet na obliczanie procentów czy pierwiastków (ale o nich później). Póki […]

Czytaj!

Wyobraźmy sobie, że nasza strona WWW jest podzielona na 4 części. W każdej części mamy inne tło, inny wygląd paragrafów, inny przycisk i inny obrazek. Albo stworzyliśmy sobie 4 różne buttony. Fajnie by było sobie to jakoś pogrupować, nieprawdaż? Przestrzenie nazw w LESSie służą do grupowania sobie domieszek w celu lepszej organizacji swojego kodu. Stworzymy […]

Czytaj!

Zmienne w LESSie podobnie jak w językach programowania dzielimy na globalne i lokalne. Zmienne globalne są widoczne i mogą być używane w całym dokumencie. Jeśli wewnątrz domieszki czy funkcji nie istnieje zmienna z taką samą nazwą to wykorzystana zostanie zmienna globalna. Zmienne lokalne istnieją tylko wewnątrz domieszek czy funkcji, jeśli wewnątrz którejś z nich zadeklarujemy […]

Czytaj!

Temat krótki. Są one identyczne jak w CSS czyli możemy stosować 2 rodzaje komentarzy. Komentarze blokowe:

Komentarze liniowe:

Czytaj!

Również krótki temat bo importowanie plików działa identycznie jak w przypadku CSS.

Wszystkie zmienne globalne, domieszki i funkcje z importowanego pliku są dostępne. W przypadku plików *.less nie musimy dopisywać jego rozszerzenia.

Czytaj!