tytuł oryginału: less web development essentials, second ...spis tre ci o autorze 11 o...

Tytuł oryginału: Less Web Development Essentials, Second Edition

Tłumaczenie: Piotr Rajca

ISBN: 978-83-283-1754-3

Copyright © Packt Publishing 2015. First published in the English language under the title ‘Less Web Development Essentials – Second Edition – 9781783554072’.

Polish edition copyright © 2016 by Helion S.A. All rights reserved.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher.

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.

Wydawnictwo HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: http://helion.pl (księgarnia internetowa, katalog książek)

Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/lesspp.zip

Drogi Czytelniku!Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/lessppMożesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Printed in Poland.

• Kup książkę• Poleć książkę • Oceń książkę

• Księgarnia internetowa• Lubię to! » Nasza społeczność

http://helion.pl/rt/lesspp

http://helion.pl/rf/lesspp

http://helion.pl/ro/lesspp

http://helion.pl

http://ebookpoint.pl/r/4CAKF

Spis tre ci

O autorze 11

O recenzentach 13

Przedmowa 15

Rozdzia 1. Usprawnianie tworzenia aplikacji internetowych z u yciem Lessa 21

Stosowanie CSS3 do okre lania wygl du kodu HTML 22Stosowanie selektorów CSS do okre lania wygl du kodu HTML 22Szczegó owo , dziedziczenie i kaskada w CSS 23Tworzenie uk adów z u yciem elastycznych pude ek 25

Kompilacja kodu Lessa 27Pocz tki stosowania Lessa 28Stosowanie funkcji watch do automatycznego od wie ania strony 30Debugowanie kodu 31Wtyczki 33

Pierwszy uk ad napisany z u yciem Lessa 35Regu y dla poszczególnych przegl darek 35Zastosowanie w a ciwo ci border-radius do tworzenia zaokr glonych wierzcho ków 38

Eliminowanie ró nic za pomoc rozwi za typu CSS reset 41Tworzenie gradientów t a 43

Przej cia, transformacje i animacje CSS 45W a ciwo box-size 49Kompilacja po stronie serwera 52

Stosowanie map ród owych CSS do debugowania 53Wtyczki 54

Poleć książkęKup książkę



Spis tre ci

6

Kompresja i minimalizacja kodu CSS 55Automatyczna kompilacja kodu Lessa do CSS 56Programy o graficznym interfejsie u ytkownika 58

Metodologie OOCSS, SMACSS oraz BEM 59Podsumowanie 60

Rozdzia 2. Stosowanie zmiennych i wstawek 63

Stosowanie komentarzy w kodzie Lessa 64Zagnie d one komentarze 64Komentarze specjalne 64

Stosowanie zmiennych 65Organizowanie plików 66Okre lanie nazw zmiennych 68Stosowanie zmiennych 69Organizowanie zmiennych 70Ostatnia deklaracja wygrywa! 71Deklaracje zmiennych nie s statyczne! 72Leniwe wczytywanie 73

Interpolacja zmiennych 73Zapisywanie warto ci 75Stosowanie wstawek 77

Proste wstawki 78Wstawki z parametrami 79Konwencje nazewnicze i sposoby wywo ywania wstawek 80Stosowanie wstawek z wi ksz liczb parametrów 81Z o ona wstawka generuj ca liniowy gradient t a 83Zwracanie warto ci ze wstawek 89Modyfikowanie zachowania wstawek 90S owo kluczowe !important 96

Podsumowanie 97

Rozdzia 3. Regu y zagnie d one, dzia ania oraz funkcje wbudowane 99

Struktura nawigacyjna 99Stosowanie regu zagnie d onych 100

Stosowanie wstawek i klas 104Zmienne 106Klasy i przestrzenie nazw 107

Odwo ania do selektora nadrz dnego z u yciem symbolu & 109Zagnie d anie wartowników i zastosowanie & 113

Przekazywanie zestawów regu do wstawek 114Dzia ania na liczbach, kolorach i zmiennych 115Scalanie w a ciwo ci 117Funkcje wbudowane 118

JavaScript 118Lista funkcji 119




Spis tre ci

7

Stosowanie funkcji operuj cych na kolorach 121Funkcje darken() i lighten() 122Mno enie kolorów 124

czenie kolorów w Lessie 127Okre lanie typu warto ci wej ciowej 127Rozszerzanie Lessa za pomoc w asnych funkcji 129

Wstawka box-shadow 130Podsumowanie 131

Rozdzia 4. Testowanie kodu i stosowanie gotowych bibliotek wstawek 133

Ponowna analiza tworzenia gradientów t a z u yciem CSS 134Nieu ywany kod 136

Testowanie kodu 138Prezentacja TDD 138Kilka s ów o zestawieniach stylów 139

Gotowe wstawki 142Tworzenie gradientów i uk adów za pomoc biblioteki Less Elements 143Stosowanie obszernej biblioteki Less Hat 146Stosowanie biblioteki wstawek 3L 147Stosowanie biblioteki wstawek Clearless 149Stosowanie w projekcie gotowych wstawek biblioteki Preboot 152Stosowanie biblioteki more-or-less 153Biblioteka Less-bidi 155

Stosowanie innych technik wykorzystuj cych Less 156Tworzenie animacji za pomoc Lessa 156Stosowanie czcionek ikonowych 158Retina.js 162

Podsumowanie 163

Rozdzia 5. Integracja Lessa z w asnymi projektami 165

Importowanie kodu CSS do Lessa 166Stosowanie dyrektywy @import 166

Stosowanie Lessa w istniej cych projektach 169Organizacja plików 169Konwersja kodu CSS do kodu Lessa 169

Zapytania medialne i responsywne projekty stron 171Elastyczne jednostki miar w zapytaniach medialnych 172Tworzenie elastycznych uk adów 172

Stosowanie siatek w uk adach i organizacji pracy 176Rola w a ciwo ci float w tworzeniu siatek 177Zastosowanie bardziej semantycznego rozwi zania 180Tworzenie uk adów z u yciem klas siatki 181Tworzenie zagnie d onych siatek 182Siatki alternatywne 183

Tworzenie w asnego projektu z u yciem responsywnej siatki 187Stosowanie systemu siatki Preboot 188




Spis tre ci

8

Stosowanie wstawek siatki do tworzenia uk adu semantycznego 192Rozszerzanie siatek 194

Dodawanie klas dla mniejszej siatki 195Stosowanie ma ej siatki w semantycznym kodzie HTML 198

Podsumowanie 199

Rozdzia 6. Stosowanie frameworku Bootstrap 3 201

Wprowadzenie do frameworku Bootstrap 202Siatka Bootstrapa 202Stosowanie plików Lessa frameworku Bootstrap 207Wtyczka Bootstrapa dla Lessa 212

Podsumowanie 224

Rozdzia 7. Stosowanie Lessa z aplikacjami zewn trznymi i innymi frameworkami 225

Cardinal CSS 226Wtyczka Lessa dla frameworku Cardinal 226

Stosowanie Semantic UI z Lessem 227Stosowanie Ionic z Lessem 229

Dodawanie Lessa do procesu budowy frameworku Ionic 230Frameworki do tworzenia siatek korzystaj ce z Lessa 231

Semantic Grid System 232Responsywny szablon Skeleton 232

WordPress i Less 234Stosowanie motywu Sage z Lessem 234Stosowanie JBST i wbudowanego kompilatora Lessa 235Motyw Semantic UI do WordPressa 236Wtyczki WordPressa i Less 236

Stosowanie Lessa z frameworkiem Play 237Stosowanie Bootstrapa z frameworkiem Play 239

AngularJS i Less 239System ngBoilerplate 240

Meteor i Less 240Ruby on Rails i Less 241Alternatywne kompilatory kodu Lessa 242

Kompilator Less.php 243Kompilator .less dla rodowiska .NET 243

Podsumowanie 244

Skorowidz 245




2

Stosowaniezmiennych i wstawek

Niniejszy rozdzia jest po wi cony nieco dok adniejszej prezentacji Lessa, a konkretnie zagad-nieniom stosowania zmiennych i wstawek. Zmienne w kodzie Lessa s przewa nie definiowanew jednym miejscu, cho mo na ich u ywa i zmienia ich warto ci. W Lessie zmienn mo nanapisa przez umieszczenie za ni definicji. Zmienne s u ywane do definiowania cz sto stoso-wanych warto ci, dzi ki czemu mo na je edytowa tylko w jednym miejscu. Bazuj c na zasa-dzie DRY (nie powtarzaj si ), u ywanie zmiennych do zapisywania cz sto stosowanych warto cipomaga w tworzeniu witryn, których utrzymanie jest atwiejsze. Z kolei wstawki s u dookre lania w a ciwo ci klas. Dzi ki nim w jednym wierszu kodu mo na po czy wiele deklaracjii u ywa ich w wielu miejscach kodu. W tym rozdziale przedstawi sposób tworzenia wstawek,korzystania z nich oraz ich wielokrotnego u ywania w projektach, jak równie stosowania dotworzenia lepszych arkuszy stylów CSS bez powielania kodu.

W tym rozdziale przedstawi nast puj ce zagadnienia:

Stosowanie komentarzy w kodzie Lessa. Stosowanie zmiennych. Interpolacja zmiennych. Sposoby zapisywania warto ci. Stosowanie wstawek.




Less. Podstawy programowania

64

Stosowanie komentarzy w kodzie LessaKomentarze sprawiaj , e kod staje si bardziej przejrzysty i zrozumia y dla innych. To bardzowa ne, by móc precyzyjnie zrozumie przeznaczenie i dzia anie analizowanego kodu. W a nie z tegopowodu na samym pocz tku tego rozdzia u przedstawi kilka informacji i przyk adów komentarzy.

Wskazówka

Nie nale y ogranicza liczby i wielko ci komentarzy, maj c na uwadze wielko plików, czas ich pobie-rania oraz wydajno dzia ania stron. W ramach procesu kompilacji i minimalizacji wynikowego kodu CSSwszystkie komentarze i inne fragmenty kodu s u ce do okre lania jego struktury praktycznie rzecz bior czostan ca kowicie usuni te. Zatem w celu poprawienia przejrzysto ci kodu i u atwienia jego zrozumieniamo na dodawa komentarze bez adnych ogranicze .

Komentarze w kodzie Lessa mo na dodawa dok adnie tak samo, jak robi si to w kodzie CSS.Tekst komentarza jest zapisywany mi dzy sekwencjami znaków /* i */. Oprócz tego Less pozwalana tworzenie komentarzy, które rozpoczynaj si od sekwencji znaków // i obejmuj ca dalszzawarto wiersza.

Jedynie prawdziwe komentarze CSS (/* */) b d kopiowane do wygenerowanego arkusza sty-lów CSS. Nawet jednak one zostan usuni te z kodu CSS w wyniku jego minimalizacji. Poni szyprzyk ad pozwala przekona si , w jaki sposób dzia aj komentarze w kodzie Lessa:

/* Komentarz Bassa.mixins() { ~"ta wstawka jest umieszczona w komentarzu";}*/

Zagnie d one komentarzeCho Less, podobnie jak PHP i JavaScript, nie pozwala na zagnie d anie komentarzy, to jednaknic nie stoi na przeszkodzie, by umieszcza komentarze jednowierszowe, zaczynaj ce si odsekwencji znaków //, wewn trz normalnych. Takie zagnie d one komentarze przedstawiaponi szy przyk ad:

/*// komentarz zagnie d ony*/

Komentarze specjalneNarz dzia do minimalizacji kodu definiuj czasami specjaln sk adni komentarzy, by pozwolina umieszczanie w zminimalizowanym kodzie wa nych komentarzy, takich jak informacjeo licencji. Tej sk adni mo na u ywa , by umieszcza na pocz tku swojego arkusza stylów postano-




Rozdzia 2. • Stosowanie zmiennych i wstawek

65

wienia licencyjne. W przypadku stosowania wtyczki clean-css i jej minimalizatora u ywanegoprzez kompilator Lessa dzia aj cy z poziomu wiersza polece takie wa ne komentarze nale yumieszcza mi dzy sekwencjami znaków /*! i !*/, jak w poni szym przyk adzie:

/*!bardzo wa ny komentarz! !*/

Uwaga

Trzeba pami ta , e przed zastosowaniem opcji -clean-css konieczne b dzie zainstalowanie wtyczkiLessa clean-css. Mo na to zrobi , wykonuj c nast puj ce polecenie:

npm install less-plugin-clean-css

Stosowanie zmiennychZmienne w Lessie u atwiaj utworzenie odpowiedniej organizacji plików i upraszczaj ichutrzymanie. Pozwalaj na okre lanie cz sto u ywanych warto ci w jednym miejscu, a nast pniestosowanie ich w ca ym pozosta ym kodzie Lessa. Zmiennych mo na u ywa , na przyk ad, doustawiania finalnych warto ci w a ciwo ci arkusza stylów. Wyobra sobie, e ju nigdy wi cej nieb dziesz musia wyszukiwa w arkuszach stylów wszystkich deklaracji konkretnego koloru.A w jaki sposób dzia aj zmienne? Otó zmienne musz mie nazwy, które zaczynaj si odznaku @.

Przyk adami nazw zmiennych mog by @color, @size czy te @tree. W nazwach zmiennych mo naumieszcza znaki alfanumeryczne, znaki podkre lenia oraz minusy. Oznacza to, e @this-is-va

riable-name-with-35-chars jest prawid ow nazw zmiennej.

Niestety stosowanie znaku @ w kodzie Lessa jest troch niejednoznaczne. Jak wiesz z poprzednie-go rozdzia u, znak @ jest tak e u ywany w nazwach parametrów wstawek. A to jeszcze niewszystko! Poniewa prawid owy kod CSS jest jednocze nie prawid owym kodem Lessa, znak @mo e si tak e pojawia na pocz tku zapyta medialnych. Jednak na podstawie kontekstu mo naprecyzyjnie okre li , czy znak @ zosta u yty na pocz tku deklaracji zmiennej. Je li na pod-stawie kontekstu nie da si jednoznacznie okre li znaczenia znaku @, to zostanie ono opisanew tre ci niniejszej ksi ki.

Zmiennej mo na przypisa warto — taki zapis jest nazywany deklaracj . Warto ciami zmien-nych mog by liczby, wielko ci wyra one w pikselach, a cuchy znaków, listy, a nawet kom-pletne zestawy regu . Zestaw regu zapisany w zmiennej jest okre lany jako „oddzielony”(ang. detached ruleset).

W celu przypisania warto ci do zmiennej nale y u y znaku dwukropka (:). Deklaracja ko czysi natomiast znakiem rednika (;). Oto kilka przyk adów deklaracji:





66

@width: 10px;@color: blue;@list: a b c d;@csv-list: a, b, c, d;@escaped-value: ~"dark@{color}";

Od momentu udost pnienia Lessa w wersji 1.7 w zmiennych mo na tak e zapisywa grupyw a ciwo ci, zagnie d one zestawy regu , deklaracje u ywanych mediów, a nawet inne fragmentykodu Lessa. Taki kod nale y umieszcza wewn trz pary nawiasów klamrowych, dok adnie taksamo jak w przypadku wstawek. Jest on okre lany jako oddzielony zestaw regu .

Taki oddzielony zestaw regu przedstawia poni szy przyk ad:

@detached-ruleset: { color: white; font-size: small; };

Zestaw regu zadeklarowany w powy szym przyk adzie mo e by u ywany w nast puj cy sposób:

p { @detached-ruleset();}

Po zadeklarowaniu zmiennej mo na u ywa jej w dowolnym miejscu kodu, by odwo a si doprzypisanej jej warto ci. Ta mo liwo sprawia, e stosowanie zmiennych w kodzie Lessa za-pewnia niezwykle du e mo liwo ci.

Organizowanie plikówJak zauwa y e , wystarczy raz zadeklarowa zmienn , by móc jej u ywa w dowolnym miejscukodu. A zatem aby zmienia warto ci zmiennych, tak e wystarczy robi to w jednym miejscu.Na przyk ad kod mo e definiowa zmienne w odr bnym pliku o nazwie less/variables.less. Todoskona y sposób organizowania plików. Je li w przysz o ci pojawi si konieczno wprowa-dzenia jakiej zmiany, b dzie wiadomo, gdzie to nale y zrobi .

Wracaj c do przyk adów resetowania w a ciwo ci CSS oraz okre lania postaci obramowai sposobu wymiarowania elementów przedstawionych w poprzednim rozdziale, mo na przyj ,e nasz g ówny plik Lessa b dzie obecnie mia nast puj c posta :

@import "less/normalize.less";@import "less/boxsizing.less";@import "less/mixins.less";@import "less/variables.less";

W powy szym kodzie dyrektywa @import importuje kod ze wskazanego pliku do g ównego plikuLessa. Nazwy plików s zapisywane mi dzy znakami cudzys owu, a za nimi jest umieszczonyrednik. Oprócz plików Lessa mo na importowa arkusze stylów CSS, które nie b d przetwarzane

przez dyrektywy Lessa. Takie rozwi zanie przedstawi i dok adniej opisz w rozdziale 5.,„Integracja Lessa z w asnymi projektami”.





67

Spróbujmy teraz otworzy w przegl darce stron http://localhost/rozdzial_02/index.html. Zostaniewy wietlona strona o bardzo prostym uk adzie, zawieraj ca nag ówek, blok tre ci, menu boczneoraz stopk sk adaj c si z trzech kolumn. Posta tej strony przedstawia rysunek 2.1. Wszystkieelementy menu maj niebieskie akcenty. Teraz otwórzmy w ulubionym edytorze pliki less/variables.less.

Rysunek 2.1. Uk ad strony okre lony w kodzie Lessa

Ciekawo zapewne kaza a Ci ju wcze niej otworzy ten plik. Nie nale y ba si jego z o o-no ci. Zarówno ten kod, jak i ca y uk ad maj za zadanie pokaza ogromne mo liwo ci stoso-wania zmiennych i wygod deklarowania ich w jednym miejscu. Takie rozwi zania znacznielepiej jest zademonstrowa na bardziej z o onych i realistycznych przyk adach ni na kodzielicz cym kilka wierszy d ugo ci. Niemniej jednak wszystkie pozosta e przyk ady przedstawionew tym rozdziale doskonale wyja ni zasady stosowania zmiennych. Zanim si zorientujesz,b dziesz doskonale rozumia kod umieszczony w tym pliku.

W ramach pierwszego tekstu warto zmiennej @dark-color zapisanej w pliku less/variables.lesszmie my z darkblue na darkgreen. Po zapisaniu pliku sprawd my, jakie ta zmiana da a efekty —je li jeszcze nie u ywasz funkcji Lessa #!watch, konieczne b dzie od wie enie strony w prze-gl darce.

Teraz uk ad b dzie mia akcenty koloru zielonego. Je li kogo nie przekona a jeszcze przydat-no zmiennych, to zapewne ta demonstracja rozwia a wszelkie w tpliwo ci. Oczywi cie w prak-tyce nie da si zmieni wygl du ca ej witryny, modyfikuj c pojedynczy wiersz kodu, ale tenprzyk ad wyra nie pokazuje, e Less potrafi znacz co u atwi prac projektantów.

Za ó my, e w a nie zako czyli my prac nad ciemnozielonym uk adem witryny i pokazujemyj szefowi. „ wietna robota! — mówi szef. — Wiem, e prosi em o zielony, ale je li nie masz





68

nic przeciwko, wola bym jednak witryn w kolorze czerwonym”. Dzi ki zastosowaniu zmiennychLessa mo emy si u miechn i zmieni w pliku less/variables.less warto zmiennej @dark-colorz darkgreen na darkred.

Jak wida , kod HTML strony jest przejrzysty i prosty — bez stylów umieszczanych bezpo-rednio w znacznikach HTML, a nawet bez nazw klas. Pojawi si jednak inny problem, na

który nale y zwróci uwag : trzeba b dzie okre la nazwy zmiennych, deklarowa je i zapisy-wa w sprytny i odpowiedni sposób. Nale y przy tym zachowa konsekwencj , gdy zagadnie-nie to ma naprawd du e znaczenie. Podczas organizowania zmiennych trzeba zawsze robi tow ten sam sposób, stosowa te same konwencje nazewnicze i we wszystkich miejscach kodu,gdzie kontekst nie jest dostatecznie jasny, nale y stosowa komentarze. Pami taj, e kto innypowinien móc w dowolnym momencie przej prace nad kodem i zrozumie go bez adnejpomocy. By to zagwarantowa , musisz nieco dok adniej pozna zmienne.

Okre lanie nazw zmiennychZmiennym zawsze nale y nadawa znacz ce i opisowe nazwy. Nazwy takie jak @a1 i @a2 zostanskompilowane, ale nie s zbyt dobre, bo kiedy liczba zmiennych si powi kszy lub trzeba b dzieco zmieni g boko w kodzie, trudno b dzie sobie przypomnie , do czego s u y a zmienna @a2.Trzeba zatem b dzie odszuka jej kontekst, by dowiedzie si , do czego by a u ywana w plikachLessa, albo jeszcze gorzej: trzeba b dzie przeanalizowa elementy HTML, by sprawdzi , jakieregu y CSS s w nich u ywane, aby na ich podstawie okre li kontekst kodu Lessa. W takiejprzykrej sytuacji b dziesz musia zacz prac od pocz tku.

Przyk adami dobrych nazw zmiennych s @nav-tabs-active-link-hover-border-color oraz@dark-color. Obie s znacz ce i opisowe, gdy wyja niaj przeznaczenie zmiennej, a nie jejwarto . Proces pozwalaj cy tworzy takie nazwy zmiennych jest okre lamy mianem seman-tycznego doboru nazw. A zatem nazwa @dark-color jest lepsza od @red. Co wi cej, w niektó-rych przypadkach warto wybiera nazwy, które b d jeszcze bardziej szczegó owe, na przyk ad@brand-color. Zmienna o takiej nazwie mog aby zawiera kolor stanowi cy g ówny motyw kolo-rystyczny projektu witryny, podobnie jak zmienna @dark-color zastosowana w ostatnim przy-k adzie. Je li taki kolor zostanie zmieniony, na przyk ad z ciemnoczerwonego na jasnozielony,to zmienna @brand-color: lightgreen wci b dzie mie sensown nazw . Niemniej jednakw przypadku deklaracji @dark-color: lightgreen czy te @red: lightgreen nie mo na powie-dzie , e nazwy zmiennych zosta y w a ciwie dobrane.

W powy szych przyk adach poszczególne s owa tworz ce nazwy zmiennych s od siebie oddzie-lane znakami minusa, ponadto nazwy s w ca o ci zapisywane ma ymi literami. Nie istniejadne cis e regu y narzucaj ce konieczno stosowania takiego sposobu zapisu nazw; wielu

programistów stosuje popularny, alternatywny sposób zapisu nazw okre lany jako notacjaCamelCase. W tej notacji dwie przedstawione wcze niej nazwy zmiennych mia yby posta@navTabsActiveLinkHoverBorderColor i @darkColor. Obie przedstawione metody zapisu nazwpoprawiaj przejrzysto kodu.





69

Wskazówka

Podczas pisania kodu CSS i HTML przywyk e zapewne do stosowania nazw sk adaj cych si z dwóch s ówoddzielonych znakiem minusa i zapisywanych ma ymi literami nazw klas, identyfikatorów, czcionek orazinnych elementów kodu. Ta konwencja zosta a tak e zastosowana w niniejszej ksi ce, a zatem wszystkienazwy b d zapisywane ma ymi literami, a ich poszczególne s owa oddzielane od siebie znakiem minusa.

To, czy kto preferuje notacj CamelCase czy zapis z minusami, nie ma szczególnego znaczenia.Du o wa niejsze jest to, by wybran konwencj nazewnicz stosowa konsekwentnie i wewszystkich plikach z kodem Lessa.

Wskazówka

Stosowanie nazw ze s owami oddzielanymi znakami minusa mo e przysporzy pewnych problemóww przypadku wykonywania oblicze arytmetycznych. W takich przypadkach konieczne b dzie dodawanieznaków odst pu. Na przyk ad deklaracja odwo uj ca si do warto ci zmiennej @value pomniejszonej o 1,@value-1, zostanie potraktowana jako jedna nazwa zmiennej, a nie wyra enie @value -1.

Stosowanie zmiennychWraz ze stopniowym powi kszaniem si projektu w którym momencie przestanie by mo liwezapisywanie warto ci wszystkich w a ciwo ci CSS w zmiennych. Wówczas konieczne b dziepodj cie decyzji, które warto ci powinny zosta zapisane w zmiennych, a które b d podanena sta e. Nie istniej adne cis e regu y okre laj ce, jak nale y dokonywa takiego wyboru,ale w nast pnych akapitach znajdziesz porady dotycz ce tego, jak to robi .

Przede wszystkim nale y znale takie warto ci w a ciwo ci, które s u ywane w kodzie wi -cej ni jeden raz. Wielokrotne wyst powanie warto ci jest oczywistym sygna em sugeruj cymmo liwo zastosowania zmiennej. W poprzednim przyk adzie tak warto ci w a ciwo ci jestzmienna @dark-color.

Oprócz tego zmienne mo na stosowa we w a ciwo ciach u ywanych do dostosowywaniawygl du projektu. Przyk adem takiej zmiennej mo e by @basic-width.

Warto te zastanowi si nad tworzeniem zmiennych do przechowywania komponentów, któreb d wielokrotnie stosowane w kodzie. Wracaj c do przedstawionego przyk adu, mo na byuzna , e nag ówek strony b dzie u ywany tak e w innych projektach. Aby zapewni takmo liwo , nale a oby utworzy nowy plik, less/header.less, i zaimportowa go do pliku g ównegoprzy u yciu dyrektywy:

@import "less/header.less";





70

Organizowanie zmiennychAby zapewni mo liwo wielokrotnego stosowania komponentów, mo na umieszcza takiekomponenty lub funkcje w odr bnych plikach Lessa i odpowiednio do nich dostosowa u ywanezmienne. W ramach prezentacji takiego rozwi zania podzielimy nasz przyk adowy plik Lessa natrzy nowe pliki: less/header.less, less/content.less oraz less/footer.less.

Oto zawarto pliku less/header.less:

header {background-color: @header-dark-color;min-height: @header-height;padding: 10px;

.center-content;

.border-radius(15px);

.box-shadow(0 0 10px, 70%);

h1 {color: @header-light-color; }}

Warto zwróci uwag , e zmienna @dark-color zosta a zmieniona na @header-dark-color.Wy wietlmy teraz w przegl darce stron http://localhost/rozdzial_02/project.html, a w edytorzeotwórzmy plik less/project.less, aby si przekona , jakie zmiany zosta y w nim wprowadzonei jakie s ich efekty.

Teraz do czmy do g ównego pliku less/project.less plik less/header.less, u ywaj c dyrektywy@import "header.less";, a w pliku less/variablesproject.less utwórzmy sekcj zawieraj cponi szy fragment kodu:

/* nag ówek (header) */@header-dark-color: @dark-color;@header-light-color: @light-color;@header-height: 75px;

Instrukcja @header-dark-color: @dark-color; zapisuje warto zmiennej @dark-color w zmien-nej @header-dark-color. Teraz, w dok adnie taki sam sposób, nale y okre li zawarto plikówless/content.less i less/footer.less i do czy je do g ównego pliku Lessa. Jak mo na zauwa y ,po wprowadzeniu tych zmian wygl d strony http://localhost/rozdzial_02/project.html si niezmieni .

A teraz spróbujmy otworzy w edytorze plik less/variablesproject.less i zmieni sekcj doty-cz c stopki w nast puj cy sposób:





71

/* stopka (footer) */@footer-dark-color: darkgreen;@footer-light-color: lightgreen;@footer-height: 100px;@footer-gutter: 10px;

Jak widzisz, elementy wy wietlone w stopce strony s teraz zielone.

Ostatnia deklaracja wygrywa!W poprzednim rozdziale przeczyta e o kaskadzie CSS, której ostatnia regu a g osi, e o ilewarto ci pozosta ych regu b d identyczne, to wygrywa warto zadeklarowana jako ostatnia.Less stosuje dok adnie t sam strategi — w ca ym poprzednim kodzie b dzie stosowanawarto podana w ostatniej deklaracji zmiennej. Pod tym wzgl dem zmienne Lessa mo na byporówna ze sta ymi stosowanymi w innych j zykach programowania. W poni szym przyk adzie,zgodnie z zasad , e ostatnia deklaracja wygrywa, warto ci w a ciwo ci property b dzie 2:

@value: 1;.class{property: @value;}@value: 2;

Ten kod Lessa zostanie skompilowany do nast puj cego kodu CSS:

.class{property: 2;}

Okazuje si , e Less w pierwszej kolejno ci wczytuje ca y kod. Tam, gdzie ma zosta u ytawarto zmiennej, Less zastosuje ostatni zadeklarowan b d ostatni odczytan warto .Regu a okre laj ca, e wygrywa ostatnia deklaracja zmiennej, odnosi si wy cznie do deklaracjizdefiniowanych w tym samym zasi gu.

W wi kszo ci j zyków programowania zasi gi s definiowane jako fragmenty kodu, które kompi-lator mo e przetwarza niezale nie od pozosta ych. Funkcje i klasy mog mie swoje w asnezasi gi. W przypadku Lessa swoje w asne zasi gi maj wstawki, które opisa em pod koniec tegorozdzia u.

Poni szy przyk ad pokazuje, e zgodnie z deklaracj umieszczon w zasi gu wstawki w a ci-wo ci property zostanie przypisana warto 3:

@value: 1;.mixin(){@value: 3;property: @value;}.class{





72

.mixin;}@value: 2;

Ten kod Less zostanie skompilowany do poni szego kodu CSS:

.class{property: 3;}

Powy szy kod pokazuje, e nie mo na zmienia warto ci zmiennej w trakcie kompilacji. To w a-nie ten fakt sprawia, e zmienne teoretycznie mo na uzna za sta e. Mo na je porówna

z umieszczon w kodzie definicj liczby PI, która zawsze jest taka sama. Taka warto zosta abyzadeklarowana tylko raz, jako PI = 3.14, i nie zmienia aby si w ca ym kodzie programu.Dlatego w kodzie Lessa, je li zmienne maj by u ywane jako sta e, nale y je deklarowa tylkojeden raz.

Powtarzane deklaracje zmiennych oraz zasada, e wygrywa ostatnia z deklaracji, b d u ywanew wielu projektach Lessa jako mechanizm dostosowywania.

W ramach prezentacji efektów ponownego zadeklarowania zmiennej utwórzmy nowy plik,less/customized.html, o nast puj cej zawarto ci:

@import "styles.less";@dark-color: black;@basic-width: 940px;

Potem odwo ajmy si do niego w dokumencie customized.html, u ywaj c znacznika link o nast -puj cej postaci:

<link rel="stylesheet/less" type="text/css" href="less/customized.less" />

Kiedy teraz wy wietlimy stron customized.html w przegl darce, przekonamy si , e uda osi nam stworzy zmodyfikowan wersj uk adu za pomoc jedynie trzech wierszy kodu!

Deklaracje zmiennych nie s statyczne!Cho zmienne dzia aj jak gdyby by y sta ymi, nie oznacza to wcale, e ich deklaracje s nie-zmienne lub statyczne. Przede wszystkim jednej zmiennej mo na przypisa warto innej.Takie rozwi zanie przedstawia poni szy fragment kodu:

@var2 : 1;@var1 : @var2;@var2 : 3;

W efekcie zmienna @var1 przyjmie warto 3, a nie 1. Tworzenie odwo ania w formie regu ynie jest tu wcale konieczne, gdy i tak stosowana jest zasada, e ostatnia deklaracja wygrywa.Zatem zmienna @var1 przyjmie warto zmiennej @var2 z jej ostatniej deklaracji.





73

W przyk adowym kodzie mo na tak e zauwa y deklaracj @light-color: lighten(@dark-color,40%);. Funkcja lighter() to tak zwana wbudowana funkcja Lessa (wbudowane funkcje

Lessa omówi dok adniej w rozdziale 3., „Regu y zagnie d one, dzia ania oraz funkcje wbu-dowane”). Wywo anie funkcji ligther() sprawia, e zmiennej @light-color zostaje przypisanawarto koloru wyznaczona na podstawie warto ci zmiennej @dark-color. Warto tak e zwróciuwag na ostatni deklaracj zmiennej @dark-color, gdy podczas wyznaczania koloru zostanieu yta warto podana w a nie w niej.

Dynamiczne deklaracje zmiennych zapewniaj du elastyczno , trzeba jednak pami ta o tym,e warto nale y zadeklarowa tylko raz, a po tej deklaracji nie mo na ju jej zmienia .

Leniwe wczytywanieZanim zako cz omawianie zmiennych i przejd do wstawek, wspomn jeszcze o leniwymwczytywaniu (ang. lazy loading). W kontek cie j zyków programowania termin ten oznaczaopó nienie inicjalizacji obiektu a do momentu, gdy stanie si on potrzebny. Leniwe wczyty-wanie jest przeciwie stwem aktywnego wczytywania. Less stosuje leniwe wczytywanie, cooznacza, e zmiennych nie trzeba deklarowa , dopóki nie b d potrzebne.

Zrozumienie teoretycznych aspektów tego zagadnienia jest wa ne, ale teraz skupmy si na tym,jak leniwe wczytywanie dzia a w praktyce. W tym celu przeanalizujmy nast puj cy przyk ad:

.class {property: @var;}@var: 2;


.class {property: 2;}

Interpolacja zmiennychW kodzie Lessa zmiennych mo na u ywa w nazwach selektorów, nazwach w a ciwo ci, adre-sach URL, a nawet w dyrektywach importu. Kompilator zast pi odwo anie do zmiennej, zast -puj c je warto ci zmiennej zapisanej w formie a cucha znaków.

Aby unikn ewentualnych niejednoznaczno ci, nazwy zmiennych mo na zapisywa w nawia-sach klamrowych. Na przyk ad poni szy fragment kodu Lessa:





74

@var: less;.@{var} { property: ~"@{var}-5";}

zostanie skompilowany do nast puj cego kodu CSS:

.less { property: less-5;}

Pocz wszy od wersji 1.6 Lessa, dok adnie w taki sam sposób mo na stosowa zmienne w nazwachw a ciwo ci. Na przyk ad poni szy fragment kodu Lessa:

@property: width;.fixed { @{property}: 100%; max-@{property}: 500px;}

zostanie skompilowany do nast puj cego kodu CSS:

.fixed { width: 100%; max-width: 500px;}

W niektórych przypadkach warto ci b d musia y by zapisane w cudzys owach (regu y stoso-wania warto ci w takich sytuacjach opisa em w nast pnym punkcie rozdzia u). Mechanizmuinterpolacji zmiennych mo na tak e u y do stworzenia zmiennych zmiennych, których przy-k ad przedstawia poni szy fragment kodu:

@variable: red;@color: "variable";p { color: @@color;}

Powy szy kod zostanie skompilowany do kodu CSS o nast puj cej postaci:

p { color: red;}

Taki sposób odwo ywania si do zmiennych mo e mie tylko jeden poziom zagnie d enia, cooznacza, e nie mo na u y kodu o postaci @@@variable.





75

Zapisywanie warto ciLess jest rozszerzeniem j zyka CSS. Oznacza to, e w przypadku próby skompilowania koduCSS nieprawid owego lub zapisanego w niestandardowy sposób, którego kompilator nie jestw stanie rozpozna , Less wy wietli komunikat o b dzie. Trzeba przy tym pami ta , e Lesssprawdza jedynie sk adni , nie dbaj c o to, czy przypisywane warto ci maj sens. W poni szymprzyk adzie w a ciwo ci width jest przypisywana warto reprezentuj ca kolor:

p {width: darkblue;}

Sk adnia CSS przewiduje natomiast, e w a ciwo width mo e przyjmowa warto ci auto,initial, inherit oraz warto liczbow z okre leniem jednostki typu px, cm, em itd. b d tewarto procentow .

Niektóre przegl darki definiuj w a ciwo ci, u ywaj c przy tym nieprawid owego kodu CSS.Najbardziej znanym przyk adem takiego dzia ania jest kod o przyk adowej postaci property:ms:somefunction(). Niektóre z takich regu mo na zast powa regu ami charakterystycznymidla konkretnych przegl darek. Nale y jednak zwróci uwag , e nieprawid owe warto ci w a-ciwo ci nie zostan skompilowane przez Lessa. Aby w skompilowanym kodzie CSS uzyska

regu o postaci property: ms:somefunction(), nale a oby u y nast puj cego kodu Lessa:

selector { property: ~"ms:somefunction()";}

Taki kod zostanie skompilowany bez adnych problemów i wygeneruje nast puj cy kod CSS:

selector { property: ms:somefunction();}

Kod ~"ms:somefunction()" korzysta ze specjalnego sposobu zapisu, który opisz dok adniejw dalszej cz ci rozdzia u.

Nowa funkcja, calc(), wprowadzona w CSS3, jest rdzennym sposobem CSS umo liwiaj cymwykonywanie prostych oblicze arytmetycznych i stanowi cym zamiennik warto ci o dowolnejd ugo ci.

W poni szym przyk adzie, zarówno w przypadku kompilacji, jak i importowania, Less nie zwróciprawid owej warto ci:

@aside-width: 80px;.content { width: calc(100% - @aside-width)}





76

Powy szy kod Lessa zostanie skompilowany na nast puj cy kod CSS:

.content { width: calc(20%);}

W powy szym kodzie Lessa @aside-width: 80px jest deklaracj zmiennej o nazwie aside-width.Warto tej zmiennej to 80 pikseli (80px). Wi cej informacji o zmiennych mo na znalew kolejnych akapitach. Najwa niejsze jest jednak to, e wynik przetwarzania powy szego koduLessa jest nieprawid owy (albo co najmniej niezgodny z oczekiwaniami), gdy funkcja calc()powinna zosta wywo ana w czasie wy wietlania strony. W takim przypadku funkcja ta dysponujemo liwo ci mieszania jednostek, takich jak warto ci procentowe i liczby pikseli. Jednak w powy -szym przyk adzie w a ciwo ci width w selektorze .content przypisywane jest 100% dost pnej sze-roko ci (czyli ca a dost pna szeroko ) pomniejszone o 80px (warto wyra aj c liczb pikseli).

Problem ten mo na rozwi za , stosuj c przedstawiony wcze niej, specjalny sposób zapisu.W przypadku Lessa, aby a cuch znaków nie zosta przetworzony, nale y go zapisa w cudzy-s owie ("") poprzedzonym tyld (~). A zatem w powy szym przyk adzie wywo anie funkcji calc()nale a oby zapisa jako ~"calc(100% - @{aside-width})".

Koniecznie nale y zwróci uwag , e nazwa zmiennej aside-width zosta a zapisana w nawia-sach klamrowych — jest to przyk ad opisywanej w poprzednim punkcie rozdzia u interpolacjizmiennych. Jednak w przypadku opisywanego tu sposobu zapisu zmiennych, okre lanegow j zyku angielskim terminem escaping, wszystko, co zosta o zapisane w nawiasach, zostanieu yte tak, jak zosta o zapisane, niemal bez zmian. Jedynym wyj tkiem od tej zasady jest inter-polacja zmiennych.

a cuchy s sekwencjami znaków. W kodzie Lessa i CSS za a cuchy uznaje si warto ci zapi-sywane mi dzy znakami cudzys owu. Bez opisywanego tu sposobu zapisu Less kompilujewszystkie a cuchy umieszczone w kodzie do postaci a cuchów CSS.

Na przyk ad w kodzie CSS w a ciwo o postaci width: "calc(100 - 80px)" nie ma wi kszegosensu, podobnie zreszt jak w a ciwo width: calc(100% - @aside-width), gdy wyra enie@aside-width nie ma adnego znaczenia.

A zatem, korzystaj c z opisywanego tu sposobu zapisu i z interpolacji zmiennych, mo na u ynast puj cego kodu Lessa:

@aside-width: 80px;.content{ width: ~"calc(100% - @{aside-width});"}

Zostanie on skompilowany do nast puj cego kodu CSS:

.content { width: calc(100% - 80px);}





77

Wskazówka

W konkretnym przypadku stosowania funkcji calc() kompilator Lessa udost pnia opcj strict-math(pocz wszy od wersji 1.4). Jest ona u ywana w postaci -strict-math=on, gdy kompilator uruchamianyjest z poziomu wiersza polece , b d jako strictMath: true w przypadku stosowania kompilacji postronie klienta. Kiedy opcja strictMath jest w czona, wywo anie o postaci calc(100% - @aside-width) zostanie skompilowane do postaci kodu calc(100% - 80px);. Trzeba przy tym pami ta ,

e podczas prac nad kolejnymi wersjami kompilatora Lessa — 1.6, 1.7 oraz 2.0 — wprowadzono wielezmian w sposobie dzia ania tej opcji.

Stosowanie wstawekWstawki odgrywaj bardzo wa n rol podczas stosowania Lessa. Przedstawi em je ju w poprzed-nim rozdziale, na przyk adzie wstawki dodaj cej do wybranego elementu obramowanie i zaokr -glone wierzcho ki. Konwencje u ywane do okre lania nazw wstawek pochodz z programowaniaobiektowego. Wstawki wygl daj jak funkcje znane z funkcyjnych j zyków programowania, leczw rzeczywisto ci dzia aj jak makra j zyka C. Umo liwiaj one dodanie do wybranej klasywszystkich w a ciwo ci innej klasy poprzez dodanie jej nazwy jako jednej z w a ciwo ci klasy,której posta nale y okre li . Poni szy kod przedstawia przyk ad wstawki i jej zastosowania:

.mixin(){ color: red; width: 300px; padding: 0 5px 10px 5px;}p{ .mixin();}

A oto posta wynikowego kodu CSS uzyskanego po kompilacji tego przyk adu:

p{ color: red; width: 300px; padding: 0 5px 10px 5px;}

Ten wynikowy kod CSS zastosowany w witrynie sprawi, e wszystkie znaczniki <p> b d mia yposta okre lon przez w a ciwo ci zdefiniowane przez wstawk mixin(). Zalet jest to, e tsam wstawk b dzie mo na zastosowa w wielu ró nych klasach. Jak mo na si by o przeko-na na przyk adzie przedstawionym w rozdziale 1., takie w a ciwo ci wystarczy zadeklarowatylko jeden raz.

Spróbujmy teraz otworzy plik less/mixin.less dost pny w przyk adach do czonych do ksi ki,w katalogu rodzial_02. W przyk adach stosowanych w tej ksi ce wszystkie wstawki s umieszczane





78

w jednym pliku. Wewn trz tego pliku poszczególne wstawki mo na uporz dkowa w zale no-ci od ich funkcji. Takie rozwi zanie, polegaj ce na zapisywaniu wstawek w jednym pliku, ma

t zalet , e mo e nas uchroni przed uszkodzeniem kodu podczas usuwania lub modyfiko-wania innych plików Lessa. W przyk adach do tego rozdzia u znajduj si dwa pliki Lessa,less/header.less oraz less/footer.less, których wstawka border-radius jest u ywana. Nie chcie-liby my, aby w razie wprowadzania zmian w zawarto ci pliku header.less pojawi y si jakieproblemy w kodzie drugiego pliku. Oczywi cie nie chcieliby my tak e doprowadzi do sytuacji,w której kod wstawki powtarza by si w kilku ró nych plikach.

Wstawka box-sizing zadeklarowana w pliku less/boxsizing.less zostanie opisana jako przypadekszczególny. Ma ona bowiem wp yw na wszystkie elementy i pozwala globalnie zmieni ustawie-nie w a ciwo ci box-sizing.

Plik less/mixins.less zawiera cztery wstawki, które omówi w kolejnych punktach rozdzia u.Dwie spo ród tych wstawek, a mianowicie box-shadow i clearfix, maj bardzie z o on struk-tur , korzystaj c , na przyk ad, z zagnie d ania, ale akurat te dwie wstawki opisz szczegó owow nast pnym rozdziale.

Proste wstawkiW poprzednim rozdziale przedstawi em kilka przyk adów prostych wstawek, takich jak borderedlub roundedcornersmixin. Prosta wstawka wygl da tak samo jak zwyczajna definicja klasy CSS.Wstawki s wywo ywane w klasach i dodaj do tych klas swoje w a ciwo ci.

W pliku less/mixins.less dost pnym w przyk adach do czonych do ksi ki zdefiniowana zosta awstawka .center-content, która przypisuje w a ciwo ci margin warto 0 auto. Ta wstawkajest u ywana do wy rodkowania nag ówka uk adu, pojemnika na tre strony oraz stopki.

Wskazówka

Warto zwróci uwag , e przedstawiona tu wstawka center-content nie jest jedynym rozwi zaniemzapewniaj cym efekt wy rodkowania. W przypadku u ywanego tu przyk adowego uk adu strony taki samefekt mo na uzyska , umieszczaj c nag ówek, tre oraz stopk w jakim nadrz dnym, wy rodkowanympojemniku. Mo na si tak e zastanawia nad nazw tej wstawki. Gdyby my si bowiem zdecydowali,eby nie wy rodkowywa tre ci strony, to taka nazwa wstawki przesta aby mie sens.

Spróbujmy teraz usun ze wstawki w a ciwo margin: 0 auto, odpowiadaj c za wy rodko-wanie tre ci. Efekty tej modyfikacji b dzie mo na zobaczy po od wie eniu strony wy wie-tlonej w przegl darce.





79

Wstawki z parametramiWspomnia em wcze niej, e wstawki dzia aj jak funkcje stosowane w funkcyjnych j zykach pro-gramowania. Oznacza to, e wstawki, podobnie jak funkcje, mog mie parametry. Parametrto warto zastosowana w po czeniu ze wstawk , a nazwa parametru jest u ywana w kodziewstawki do odwo ywania si do jego warto ci. Poni szy kod przedstawia przyk ad wstawki z para-metrem i jej zastosowania:

.mixin(@parameter){ property: @parameter;}.class1 {.mixin(10);}.class2 {.mixin(20);}

Ten kod zostanie skompilowany do kodu CSS o nast puj cej postaci:

.class1 { property: 10;}.class2 { property: 20;}

Ten przyk ad wyra nie pokazuje, e dzi ki parametryzacji wstawki s narz dziem o ogromnychmo liwo ciach. Mo na ich bowiem wielokrotnie u ywa , by okre la w a ciwo ci zale ne odwarto ci parametrów.

Warto ci domy lneParametry mog mie opcjonalne warto ci domy lne, definiowane nast puj co: .mixin(@pa

rameter:defaultvalue);. Sposób dzia ania tych domy lnych warto ci parametrów mo naprzeanalizowa na przyk adzie wstawki border-radius zdefiniowanej w pliku less/mixins.less:

.border-radius(@radius: 10px){ -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}

Warto zwróci uwag , e domy ln warto ci parametru @radius jest 10px. Je li powy szawstawka zostanie wywo ana bez okre lania warto ci parametru, to zostanie zastosowana wartodomy lna. Przeanalizujmy ten oto przyk ad kodu Lessa:

div { border-radius(); // bez argumentów &.small {





80

border-radius(5px); }}

Powy szy kod Lessa zostanie skompilowany do kodu CSS o nast puj cej postaci:

div { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}div.small { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

W powy szym kodzie warto zwróci uwag na klas .small, która zosta a zagnie d ona wewn trzselektora div. Kod u ywa tak e znaku &, by odwo a si do selektora nadrz dnego. Wi cej infor-macji na temat zagnie d ania selektorów i zastosowania znaku & mo na znale w rozdziale 3.,„Regu y zagnie d one, dzia ania oraz funkcje wbudowane”.

Konwencje nazewnicze i sposoby wywo ywania wstawekW niniejszej ksi ce wstawki maj znacz ce, opisowe nazwy, które, podobnie jak nazwy zmien-nych, s zapisywane z wykorzystaniem znaku minusa. Stosowanie znacz cych i opisowych nazwupraszcza utrzymanie kodu i u atwia innym osobom jego zrozumienie. Nazwy parametrówi zmiennych zaczynaj si od znaku @. Zazwyczaj na podstawie kontekstu bez trudu b dziemo na okre li , czy chodzi o zmienn czy o parametr wstawki.

Aby lepiej zrozumie parametry i zmienne, przeanalizujmy nast puj cy przyk ad:

@defaulvalue-parameter1 :10;.mixin(@parameter1: @defaulvalue-parameter1){ property: @parameter1;}.class { .mixin}

Powy szy kod zostanie skompilowany do nast puj cej postaci:

.class{ property: 10;}





81

W przyk adzie tym nale y zwróci uwag na to, e @defaultvalue-parameter1 jest zmienn .Kolejny przyk ad demonstruje zagadnienie zasi gu we wstawkach:

@defaulvalue-parameter1 :10;.mixin(@parameter1: @defaulvalue-parameter1){ property: @parameter1;}.class { .mixin}@parameter1 : 20;


.class{ property: 10;}

W tym przyk adzie ostatnia deklaracja @parameter1 jest umieszczona poza wstawk , przez cowarto b dzie wynosi 10.

Stosowanie wstawek z wi ksz liczb parametrówWstawki mog mie wi cej ni jeden parametr, przy czym wówczas nazwy poszczególnychparametrów musz by od siebie oddzielone znakiem przecinka. Tak e w wielu innych, funk-cyjnych j zykach programowania przecinek jest cz sto stosowany jako znak separatora para-metrów. Przecinki s jednak w tym kontek cie nieco niejednoznaczne, gdy nie tylko s u dooddzielania parametrów, lecz równie s stosowane do separacji elementów list zapisanychw formacie cvs (ang. comma-separated values — warto ci rozdzielone przecinkami).

Wstawka .mixin(a,b,c,d) b dzie wywo ywana z czterema parametrami. Dok adnie tak samob dzie wywo ywana wstawka .mixin(a;b;c;d). A teraz przeanalizujmy przyk ad wywo aniawstawki, które b dzie mia o nast puj c posta : .mixin(a,b,c;d). W tym przypadku wstawkama tylko dwa parametry, z których pierwszy jest list sk adaj c si z trzech elementów. Je liw li cie parametrów wstawki zostanie odnaleziony cho by jeden znak rednika, to tylko znakirednika b d uznawane za separatory parametrów. Poni szy przyk ad przedstawia efekt, jaki

wywo a zastosowanie w li cie parametrów dodatkowego rednika:

.mixin(@list){ property: @list;}.class{ .mixin(a,b,c,d;);} // uwaga na dodatkowy znak rednika!

Ten kod Lessa zostanie skompilowany do kodu CSS o nast puj cej postaci:

.class{ property: a, b, c, d;}





82

Bez tego znaku rednika na ko cu wstawka zosta aby wywo ana z czterema parametrami. W takimprzypadku kompilator Lessa wy wietli by b d RuntimeError: No matching definition foundfor .mixin(a, b, c, d)1, oczekiwa by bowiem znalezienia wstawki zadeklarowanej w nast puj cysposób: .mixin(@a, @b, @c, @d).

Kolejny przyk ad przedstawia „przeci anie” wstawek — sytuacj , w której kompilator skom-piluje t wstawk , która pasuje do wywo ania:

.mixin(@color; @width) { border: 1px solid @color; width: 50px;}.mixin(@color;) { color: green;}p { &.onlycolor { .mixin(green); } &.including-border { .mixin(green;500px); }}


p.onlycolor { color: green;}p.including-border { border: 1px solid green; width: 50px;}

Powy szy przyk ad wyra nie pokazuje, e Less pozwala na tworzenie wstawek o tej samej nazwie.W przypadku odnalezienia wstawek o identycznych nazwach kompilator Lessa u yje wstawkio odpowiedniej liczbie parametrów b d te , je li adna wstawka pasuj ca do wywo ania niezostanie odnaleziona, zg osi b d. Takie dobieranie wstawek na podstawie liczby parametrówmo na by porówna z przeci aniem metod — rozwi zaniem stosowanym w wielu j zykachprogramowania.

Je li wywo anie pasuje do kilku wstawek, jak w poni szym przyk adzie, to kompilator u yjewszystkich pasuj cych wstawek:

.mixin(@a){ property-a: @a;}

1 Nie znaleziono definicji pasuj cej do .mixin(a, b, c, d) — przyp. t um.





83

.mixin(@b){ property-b: @b;}class{ .mixin(value);}


class { property-a: value; property-b: value;}

Z o ona wstawka generuj ca liniowy gradient t aDysponujesz ju wystarczaj c wiedz teoretyczn , by móc tworzy bardziej z o one wstawki.W kolejnym przyk adzie do trzech elementów umieszczonych w stopce strony dodamy t a o postacigradientu liniowego sk adaj cego si z trzech kolorów, generowane przez odpowiednio spara-metryzowan wstawk .

Finaln posta elementów stopki przedstawia rysunek 2.2.

Rysunek 2.2. Gradienty liniowe w tle elementów dodane przy u yciu wstawki Lessa

Te gradienty zosta y wybrane celowo — ze wzgl du na swoj z o ono i dobrze opisane zmiany,jakim podlega y. W efekcie napiszemy z o on wstawk , która bez w tpienia nie jest doskona a,lecz z pewno ci znacz co poprawi posta wy wietlanych elementów. Mo na mie jednakpewno , e t wstawk trzeba b dzie od czasu do czasu poprawia , ze wzgl du na zaprze-stawanie obs ugi starszych przegl darek, pojawianie si nowych, zmiany w specyfikacji oraznowe informacje o gradientach. Dodatkowe przyk ady zastosowania gradientów mo na znalena stronie https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients.

Tych koniecznych zmian nie sposób unikn , mo na jednak zminimalizowa czas niezb dny dozapewnienia aktualizacji u ywanych wstawek. Less gwarantuje, e wszystkie gradienty t a b dtworzone na podstawie tej samej wstawki, zdefiniowanej w jednym miejscu.

Najpro ciej rzecz ujmuj c, gradienty CSS s definiowane jako obrazy t a. Z tego powodu tworzysi je, korzystaj c z w a ciwo ci background-image.





84

W tej ksi ce do okre lania gradientów b dzie u ywana w a ciwo background-image. Mo najednak znale (w internecie i zapewne w innych ksi kach) tak e przyk ady, w których dotego samego celu jest u ywana w a ciwo background. Nie stanowi to wielkiej ró nicy. CSSdefiniuje ró ne w a ciwo ci okre laj ce posta t a, takie jak background-image, background-color,background-size oraz background-position. Background to skrótowa w a ciwo pozwalaj caokre li warto ci wszystkich tych w a ciwo ci w jednej regule. Je li pierwsz warto ci okre-lon we w a ciwo ci background b dzie obraz lub, jak w tym przypadku gradient, to wszystkie

pozosta e w a ciwo ci t a przyjm swoje domy lne warto ci.

Tworzenie wstawki mo na zacz od przygotowania nast puj cej listy wymaga :

Wstawka musi dawa mo liwo okre lania kierunku gradientu, wyra onegow stopniach.

Gradient b dzie si sk ada z trzech kolorów. Nast pnie mo na okre li list przegl darek oraz ich wersji, które wstawka

ma obs ugiwa .

Oto pierwsze wiersze kodu wstawki:

.backgroundgradient(@deg: 0deg; @start-color: green; @between-color: yellow;@end-color: red; @between:50%)

{ background-image: linear-gradient(@deg, @start-color, @between-color @between, @end-color);}

Rysunek 2.3 ilustruje przyk adow posta gradientu liniowego. Zosta on stworzony na podstawierysunku opublikowanego 11 wrze nia 2013 roku na stronie https://drafts.csswg.org/css-images-3/.

Rysunek 2.3. Jeden ze sposobów prezentacji gradientu o k cie 45 stopni





85

Wstawka tworz ca gradient t a ma pi parametrów, które zosta y opisane na poni szej li cie:

Pierwszy parametr okre la kierunek gradientu wyra ony w stopniach. Podana liczbastopni okre la k t pomi dzy osi pionow a kierunkiem gradientu. Opisywaniekierunku rozpoczyna si u do u elementu. K t wynosz cy 0 stopni odpowiadagradientowi, który rozpoczyna si u do u i zmienia ku górze. Nast pnie k t zmieniasi zgodnie z ruchem wskazówek zegara, tak e k t o warto ci 90 odpowiadagradientowi zmieniaj cemu si od lewej do prawej, i tak dalej.

Kolejne trzy parametry opisuj trzy kolory gradientu, przy czym dla ka dego z nichzosta a okre lona warto domy lna.

Pi ty, ostatni parametr okre la miejsce, w którym rodkowy kolor przyjmie swojprawdziw warto . Warto ci tego parametru jest warto procentowa szeroko cielementu, w którym jest wy wietlany gradient. Dla pierwszego i trzeciego koloruwarto ci te wynosz odpowiednio 0 i 100.

Nowoczesne przegl darki, takie jak Internet Explorer 11, Firefox 16+, Opera 12.10+, Safari 7+oraz Chrome 26+, obs uguj w a ciwo ci background-image. Jednak z my l o starszych prze-gl darkach nale y doda regu y charakterystyczne dla nich. Pierwszym problemem, jaki siz tym wi e, jest to, e ró ne regu y charakterystyczne dla konkretnych przegl darek stosujró ne sposoby okre lania k ta gradientów. Aby wyeliminowa ten problem, mo na zastosowakorekcj 90 stopni, u ywaj c w tym celu nast puj cego kodu:

.backgroundgradient(@deg: 0deg; @start-color: green; @between-color: yellow;@end-color: red; @between:50%){

@old-angle: @deg – 90deg;-ms-background-image: linear-gradient(@old-angle , @start-color, @between-color@between, @end-color);

background-image: linear-gradient(@deg, @start-color, @between-color @between,@end-color);

}

W a ciwo z prefiksem -ms jest stosowana przez przegl dark IE10, gdy wcze niejsze wersjenie obs uguj obrazów t a. Alternatywnym rozwi zaniem mo e by dodanie filtra pozwalaj -cego na wy wietlanie gradientów okre lanych przy u yciu dwóch kolorów. Nie ma mo liwo cizastosowania tego filtra wraz z obrazem zast pczym, dlatego te z my l o przegl darkach bazu-j cych na silniku WebKit, takich jak Chrome i Safari, konieczne b dzie utworzenie gradientuprzy u yciu funkcji -webkit-linear-gradient. Niemniej jednak starsze wersje tych przegl darekwymagaj tworzenia gradientów za pomoc funkcji -webkit-gradient. Trzeba przy tym pami ta ,e funkcja -webkit-gradient ma niestandardow sk adni . Oto ostateczna posta wstawki gene-

ruj cej gradient:

.backgroundgradient(@degrees: 0deg; @start-color: green; @between-color:yellow;@end-color: red; @between:50%){

background-image: -moz-linear-gradient(@degrees, @start-color 0%, @between-color @between, @end-color 100%);





86

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start-color), color-stop(@between,@between-color), color-stop(100%,@end-color)); background-image : -webkit-linear-gradient(@degrees, @start-color 0%, @between-color @between, @end-color 100%); background-image: -o-linear-gradient(@degrees, @start-color 0%, @between-color @between, @end-color 100%); background-image: -ms-linear-gradient(@degrees, @start-color 0%, @between-color @between, @end-color 100%); background-image: linear-gradient((@degrees - 90deg), @start-color 0%, @between-color @between, @end-color 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '@startcolor', endColorstr='@endcolor',GradientType=0 );}

Powy szy przyk ad pokazuje, e nawet w przypadku korzystania z Lessa tworzony kod mo eby z o ony. Je li z o ono takiego kodu nie wynika z konieczno ci obs ugi wielu przegl da-rek, to mo na zauwa y zalety, jakie zapewnia stosowanie Lessa — pozwala on bowiem umie-ci ca y ten kod w jednym miejscu.

Kod przedstawiony w tym punkcie rozdzia u mo na znale w przyk adach do czonych doksi ki, w plikach directivebackgrounds.html oraz less/directivebackgrounds.less, umieszczo-nych w katalogu rodzial_02. Je li zobaczywszy ten przyk ad, zastanawiasz si , po co w ogólestosowa gradienty t a, to zajrzyj na stron http://lea.verou.me/css3patterns/, by si przekona ,co przy ich u yciu mo na stworzy .

W niniejszej ksi ce zak adamy, e najlepsz z dost pnych praktyk jest stosowanie wtyczkiautoprefixer, pozwalaj cej dodawa do kodu prefiksy przegl darek. Jak ju wspomnia em,wtyczka ta nie dodaje niestandardowych w a ciwo ci ani rozwi za typu polyfill. Je li poja-wia si konieczno zastosowania niestandardowego kodu CSS w celu obs ugi starszych prze-gl darek, u ycie wstawek wydaje si by w a ciwym rozwi zaniem. Jak pokaza powy szyprzyk ad, dzi ki parametrom wstawki umo liwiaj tworzenie gradientów o ró nej postaci przyu yciu tego samego kodu.

Zmienne specjalne @arguments i @restLess definiuje dwie zmienne specjalne. Pierwsza z nich, @arguments, zawiera list wszystkichargumentów. Zmienna ta jest dost pna jedynie we wstawkach. W kodzie Lessa elementy list soddzielane od siebie odst pami, dzi ki czemu zmiennej @arguments mo na u ywa we w a ci-wo ciach, które wymagaj listy warto ci. Warto ci skrótowych w a ciwo ci margin i paddingmo na okre la przy u yciu list, co zosta o wykorzystane w poni szym przyk adzie:

.setmargin(@top:10px; @right:10px; @bottom: 10px; @left 10px;){ margin: @arguments;}p{ .setmargin();}





87


p { margin: 10px 10px 10px 10px;}

Drug ze zmiennych specjalnych udost pnianych przez Less jest @rest. Nazwa @rest... pozwalaodwo a si do wszystkich argumentów podanych w wywo aniu wstawki i niemaj cych swoichodpowiedników na li cie parametrów.

Zastosowanie zmiennej @rest... pozwala zatem podawa w wywo aniu wstawki niesko czonliczb argumentów. Nale y przy tym zwróci uwag , e trzy kropki umieszczone na ko cuzmiennej s elementem sk adni.

Zmienna @rest... jest jedynie nazw . W rzeczywisto ci to sk adnia ... zapewnia mo liwopodawania dowolnej liczby argumentów i sprawia, e niezale nie od tego, ile ich b dzie,wstawka zostanie dopasowana. Zapis @rest... zapewnia te same mo liwo ci, lecz dodatkowosprawia, e kompilator zapisze niedopasowane argumenty w zmiennej @rest. Zamiast @rest...mo na by zastosowa dowoln inn nazw , na przyk ad @odd..., przy czym w takim przypadkuniedopasowane argumenty zosta yby zapisane w zmiennej @odd.

Poni szy przyk ad pokazuje, e w zmiennej @rest... zostan umieszczone wszystkie kolejneargumenty podane za zmienn @a, dzi ki czemu zostan one przypisane w a ciwo ci property2:

.mixin(@a,@rest...) { property1: @a; property 2: @rest;}element { .mixin(1;2;3;4);}

Ten kod zostanie skompilowany do kodu CSS o poni szej postaci:

element { property1: 1; property2: 2 3 4;}

Mo na tak e rozwa y stosowanie zmiennej @rest... jako listy warto ci rozdzielonych przecin-kami. Dzi ki temu mo na przepisa przedstawion wcze niej wstawk .backgroundgradientw nowej postaci, dost pnej w pliku less/mixinwithdirectivebackgrounds.less:

.backgroundgradient(@deg: 0; @colors...) { background-repeat: repeat-x; background-image: linear-gradient(@deg, @colors);}

Teraz w wywo aniu wstawki mo na poda niesko czon list kolorów, jak w poni szym przy-k adzie:





88

div#content { .backgroundgradient(90deg;blue,white,black,pink,purple,yellow,green,orange);}

Wygl d gradientu tworzonego przy u yciu powy szego kodu Lessa zosta przedstawiony narysunku 2.4.

Rysunek 2.4. Efekty generowane przez wstawk .backgroundgradient akceptuj c nieograniczon list kolorów

Warto zwróci uwag , e ta nowa wersja wstawki .backgroundgradient() nie u ywa adnych pre-fiksów przegl darek. Aby ta wstawka mog a by u ywana w starszych przegl darkach, trzeba jskompilowa z u yciem wtyczki autoprefixer.

Przekazywanie zestawów regu jako argumentówOddzielone zestawy regu , o których wspomnia em w podrozdziale „Stosowanie zmiennych”,mog by tak e u ywane jako argumenty wstawek. Przekazywanie oddzielonych zestawów regujako argumentów wstawek pozwala definiowa wstawki, które b d umieszcza y ró ne zestawyregu w tej samej klasie nadrz dnej b d zapytaniu medialnym. Poni szy kod Lessa przed-stawia dzia anie takiego rozwi zania:

.large(@rules) { @media (min-width:960px){ @rules(); }}p { font-size: 1em; .large( {font-size: 2em;});}img.large { display:none; .large( {display:block; max-width:100%;});}

Jak si okazuje, powy szy kod Lessa zostanie skompilowany do kodu CSS o nast puj cej postaci:

p { font-size: 1em;}@media (min-width: 960px) { p { font-size: 2em; }}





89

img.large { display: none;}@media (min-width: 960px) { img.large { display: block; max-width: 100%; }}

Jak wida w wynikach tego przyk adu, Less nie scala zapyta medialnych. Aby grupowa zapyta-nia medialne w skompilowanym kodzie CSS, konieczne b dzie zainstalowanie wtyczki Lessagroup-css-media-queries (npm install less-plugin-group-css-media-queries) lub wtyczki Ple-eease (npm install less-plugin-pleeease).

Zwracanie warto ci ze wstawekOsoby przyzwyczajone do programowania funkcyjnego albo cho by znaj ce funkcje matema-tyczne mog oczekiwa , e wstawki b d zwraca y jakie warto ci wynikowe. Oznacza to mniejwi cej tyle, e chcemy przekaza do wstawki jak warto x, a ona ma zwróci warto y.Wstawki Lessa nie zapewniaj mo liwo ci zwracania jakichkolwiek warto ci, ale podobnyefekt mo na zasymulowa , korzystaj c z zasi gu wstawek. Okazuje si , e zmienna zdefiniowanawe wstawce zostanie skopiowana do zasi gu, w którym wstawka zosta a wywo ana, o ile tylkow zasi gu tym nie zosta a wcze niej zdefiniowana zmienna o tej samej nazwie. Poni szy przy-k ad wyja nia to rozwi zanie:

.returnmixin(){ @par1: 5; @par2: 10;}.mixin(){ @par2: 5; // zmienna chroniona przed nadpisaniem property1: @par1; // zmienna skopiowana z zasi gu wstawki returnmixin property2: @par2; .returnmixin();}element{ .mixin();}

Skompilowanie powy szego kodu Lessa wygeneruje nast puj cy kod CSS:

element { property1: 5; property2: 5;}





90

Po przeanalizowaniu powy szego przyk adu wida , e w a ciwo @property1: @par1 mo na byporówna z wywo aniem funkcji, takim jak property1 = returnmixin();.

Wskazówka

Stosowanie zasi gu do symulowania zwracania warto ci mo e tak e by u ywane do przekazywaniawstawek. Otó wstawka zdefiniowana wewn trz drugiej wstawki b dzie dost pna w zasi gu, w którymta druga wstawka zosta a wywo ana. Niemiej jednak, w odró nieniu od tego, jak jest w przypadkuzmiennych, takie wstawki nie s chronione! Ten proces nazywamy odblokowywaniem, ale jego dok ad-niejsze wyja nienie wykracza poza zakres niniejszej ksi ki.

Modyfikowanie zachowania wstawekW celu poprawienia elastyczno ci wstawek przyda aby si mo liwo modyfikowania sposobuich dzia ania na podstawie parametrów wej ciowych. Less udost pnia kilka ró nych mechani-zmów zapewniaj cych te mo liwo ci.

Prze cznikiWyobra my sobie wstawk color();, która w zale no ci od kontekstu przypisuje w a ciwo cicolor warto white lub black. Przypiszmy zatem zmiennej @context warto light (@context:light;) i zadeklarujmy dwie wstawki o tej samej nazwie, jak w poni szym przyk adzie:

.color(light){ color: white;}.color(dark){ color: black;}

W takim przypadku zastosowanie w kodzie wywo ania o postaci .color(@context) sprawi, ew zale no ci od zadeklarowanej warto ci zmiennej @context w a ciwo ci color zostanie przy-pisana warto white albo black. Jak na razie, takie rozwi zanie mo e si wydawa niezbytu yteczne, ale oka e si przydatne, gdy wielko projektu zacznie rosn . Mo na si o tym prze-kona , analizuj c kod projektu Bootflat, dost pny na stronie http://www.flathemes.com/. Tenprojekt udost pnia ró ne motywy dla frameworku Bootstrap. Sam Bootstrap jest frameworkiemkorzystaj cym z Lessa. Bootflat definiuje dwa style, z których jeden bazuje na poprawionychstylach Bootstrapa 3.0, a w drugim, Square UI, zosta y usuni te zaokr glone wierzcho ki. W pro-jekcie Bootflat mo na zastosowa wybrany styl, u ywaj c w tym celu jednego prze cznika.





91

Dopasowywanie argumentówLess pozwala tworzy wiele wstawek o tej samej nazwie. Je li w kodzie faktycznie pojawi sikilka wstawek o tej samej nazwie, to zostan u yte wszystkie, które pasuj do listy argumentówpodanych w wywo aniu. Poni szy przyk ad przedstawia dwie wstawki color:

.color(@color){ color: @color;}.color(@color1,@color2){ color: gray;}

W takim przypadku wywo anie .color(white) zostanie skompilowane do postaci color: white,natomiast wywo anie .color(white,black)— do postaci color: gray. Nale y przy tym zwróciuwag , e wywo anie .color(white) nie pasuje do wstawki .color(@color1,@color2), którawymaga dwóch argumentów, a zatem kompilator jej nie u yje.

Wstawki chronioneLess pozwala tak e na tworzenie wi kszej liczby wstawek o tej samej nazwie maj cych t samliczb parametrów. Równie w takim przypadku, jak pokazuje poni szy przyk ad, zostan u ytewszystkie wstawki pasuj ce do wywo ania:

.color(@color){ color: @color; display: block;}.color(@color) { color: blue;}.class{ .color(white)}


.class{ color: white; display: block; color: blue;}

Wskazówka

Zastosowanie dwóch w a ciwo ci color w powy szym przyk adzie nie ma wi kszego sensu. Less nieusuwa powtarzaj cych si deklaracji, chyba e zostan one u yte dok adnie w taki sam sposób.





92

Dla unikni cia problemów ze wstawkami o tej samej nazwie mo na skorzysta z wartownikówwstawek (ang. mixin guards). Wartownik jest definiowany przy u yciu s owa kluczowego when,po którym w nawiasie nale y okre li warunek. W przypadku, gdy warunek przyjmie wartotrue, wstawka zostanie u yta. Dzia anie tego rozwi zania atwiej b dzie mo na zrozumie ,analizuj c poni szy przyk ad:

.mixin(@a) when (@<){ color: white;}.mixin(@a) when (@>=1){ color: black;}.class { .mixin(0);}.class2 { .mixin(1);}


.class { color: white;}.class2 { color: black;}

Wartowników mo na u ywa podobnie jak instrukcji if w popularnych j zykach programo-wania. Mo na w nich stosowa nast puj ce operatory porównania: >, >=, =, =< oraz <. Warunkimo na ze sob czy , oddzielaj c je od siebie przecinkami. Tak utworzone wyra enie zwróciwarto true, je li dowolny z warunków zwróci warto true.

Dost pne jest tak e s owo kluczowe and, które sprawia, e wyra enie sk adaj ce si z dwóchwarunków zwróci true, je li ka dy z warunków zwróci true, na przyk ad @a>1 and @a<5.I w ko cu dost pne jest te s owo kluczowe not, które pozwala zmieni warto warunku naprzeciwn , na przyk ad when (not a = red).

Wskazówka

Osoby, które ju wcze niej korzysta y z zapyta medialnych CSS, na pewno zauwa , e wartownicyw Lessie dzia aj dok adnie tak samo jak zapytania medialne w kodzie CSS.

Warto tak e zauwa y , e w warunkach wartowników mo na te stosowa wbudowane funkcjeLessa (opisa em je dok adniej w nast pnym rozdziale). Mog one operowa na wszystkich zde-finiowanych zmiennych, nawet na tych, które nie zosta y podane na li cie parametrów wstawki.





93

Poni szy kod prezentuje przyk ad zastosowania jednej z wbudowanych funkcji w wartownikuwstawki:

@style: light;.mixin(@color) when iscolor(@color) and (@style = light) { color: pink;}.class() { .mixin(red);}


.class { color: pink;}

W razie u ycia kodu @style: dark lub .mixin(1); wstawka mixin nie zostanie zastosowana.

Wartowniki CSSPocz wszy do wersji 1.5 Lessa, wartowników mo na tak e u ywa bezpo rednio w selektorach.Poni szy kod przedstawia przyk ad regu y z wartownikiem:

h1 when (@mobile = true) { font-size: large;}

Takie rozwi zanie sprawia, e kompiluj c ten sam kod Lessa, b dzie mo na uzyska kilka ró -nych wersji kodu CSS.

Gdyby powy szy kod zosta zapisany w pliku Lessa o nazwie source.less, to mo na by nast pnieutworzy dwa kolejne pliki Lessa i kompilowa je, by uzyska dwa ró ne arkusze stylów. Poni szykod przedstawia zawarto obu tych przyk adowych plików:

mobile.less:@import "source";@mobile: true;

default.less:@import "source";@mobile: false;

Zamiast tworzy odr bne pliki mo na tak e zastosowa opcj kompilatora --modify-var i u yjej, by wygenerowa ró ne arkusze stylów CSS. Opcja --modify-var pozwala zmodyfikowawarto zmiennej zdefiniowanej w kodzie. Jak ju wspomnia em, Less korzysta z leniwegowczytywania, dzi ki czemu istnieje mo liwo zmiany warto ci zmiennej poprzez umieszczeniejej definicji na samym ko cu kodu.





94

W ostatnim przyk adzie, korzystaj c z kompilatora dzia aj cego z poziomu wiersza polece ,mobiln wersj arkusza stylów mo na wygenerowa za pomoc nast puj cego polecenia:

lessc --modify-var="mobile=true" source.less

W przypadku stosowania kompilatora dzia aj cego po stronie klienta nale y u y opcji modifyVars. Poni szy fragment kodu HTML pokazuje, w jaki sposób mo na u y tej opcji, by przypi-

sa zmiennej mobile warto true:

<link data-modify-vars='{ mobile: "true"}' rel="stylesheet/less" type="text/css" href="less/styles.less">

Stosowanie wartowników i dopasowywania argumentów do tworzenia p tliKiedy Less nie jest w stanie odnale pasuj cej wstawki, nie zatrzymuje si , lecz zaczyna prze-twarza dalsz cz kodu. Ten sposób dzia ania kompilatora mo na wykorzysta , w po czeniuz wartownikami i dopasowywaniem argumentów, do tworzenia p tli. Aby zrozumie to rozwi -zanie, wyobra sobie dziesi klas, z których ka da zawiera obraz t a oznaczony odpowiednimnumerem. Klasa .class1 definiuje w a ciwo background-image o warto ci background-1.png,klasa .class2 definiuje w a ciwo background-image o warto ci background-2.png i tak dalej.Takie klasy mo na wygenerowa , u ywaj c nast puj cego kodu Lessa:

.setbackground(@number) when (@number>0) { .setbackground( @number - 1 ); .class@{number} { background-image: ~"url(backgroundimage-@{number}.png)"; }}.setbackground(10);

Po skompilowaniu wygeneruje on nast puj cy kod CSS:

.class1 { background-image: url(backgroundimage-1.png);}.class2 { background-image: url(backgroundimage-2.png);}....class10 { background-image: url(backgroundimage-10.png);}

Na pierwszy rzut oka ta wstawka mo e si wydawa z o ona, gdyby jednak spróbowa samo-dzielnie j przetworzy , to okaza oby si , e zawiera wiele elementów, które ju poznali my.

Przedstawiona w powy szym przyk adzie wstawka setbackground wywo uje sama siebie. Pro-grami ci nazywaj tak technik rekurencj . A jak dzia a ta wstawka?

Wywo anie .setbackground(10); pasuje do wstawki .setbackground(@number), gdy warunek@number>0 jest spe niony, a zatem mo na u y wstawki. Tak e pierwsza próba przetworzeniawywo ania .setbackground(@number - 1); zako czy si pomy lnym odnalezieniem pasuj cej





95

wstawki. Oznacza to, e kompilator ponownie wykona wstawk . Ten proces b dzie si powtarzaa do momentu, gdy wyra enie @number - 1 przyjmie warto 0, poniewa w tym przypadkuadna pasuj ca wstawka nie zostanie odnaleziona. Teraz kompilator cofnie si z powrotem do

miejsca, w którym si zatrzyma , by wykona t wstawk .

Tym ostatnim miejscem by o wywo anie wstawki, w którym zmienna @number by a równa 1, a wi ckompilator przetworzy deklaracj .class@{number} { background-image: ~"url(backgroundimage-

@{number}.png)"; }, podstawiaj c w miejsce zmiennej @number warto 1. Jeszcze wcze niej-sze miejsce, w którym kompilator si zatrzyma , odpowiada o wywo aniu wstawki, w którymzmienna @number mia a warto 2. A zatem kompilator przetworzy deklaracj .class@{number}{ background-image: ~"url(backgroundimage-@{number}.png)"; }, podstawiaj c w miejscezmiennej @number warto 2. W ten sposób kompilator wróci a do miejsca, w którym zmienna@number mia a warto 10, a wtedy ca y kod b dzie ju skompilowany. Kompilator b dzie wi cmóg zako czy dzia anie.

Oprócz wartowników i dopasowywania argumentów powy szy kod zawiera tak e przyk ad wsta-wiania zmiennej do nazwy w a ciwo ci, w deklaracji klasy @class@{number}, oraz przetwarza-nia a cuchów znaków, we fragmencie ~"url(backgroundimage-@{number}.png)";. Ta wstawkapokaza a równie konieczno stosowania dodatkowych znaków odst pu podczas wykonywa-nia dzia a arytmetycznych. Dzi ki nim kod @number - 1 nie zostanie potraktowany jak nazwazmiennej @number-1.

Stosowanie wstawek do przetwarzania w p tli zbioru warto ciW niektórych sytuacjach istnieje mo liwo zdefiniowania warto ci w formie zestawu wstawek i u y-wania tej struktury do tworzenia powtarzaj cego si kodu. Przeanalizujmy nast puj cy kod Lessa:

.widths() { .set("small",100px); .set("medium",200px); .set("large",400px);}div { .widths(); .set(@name,@width) { @classname: ~"@{name}"; &.@{classname} { width: @width; } }}

W wyniku jego kompilacji zostanie wygenerowany nast puj cy kod CSS:

div.small { width: 100px;}div.medium {





96

width: 200px;}div.large { width: 400px;}

Zrozumienie powy szego kodu Lessa wcale nie jest atwym zadaniem. Wstawka .widths()zawiera seri wywo a wstawki .set() i podobnie jak wiele innych wstawek nie b dzie bezpo-rednio generowa a wyników podczas kompilacji. Wywo anie wstawki .widths() umieszczone

wewn trz selektora div udost pnia w bie cym zasi gu wstawk .set(). Nast pnie wstawka.set() wywo uje w tym samym zasi gu wstawk .set(@name,@width), a w ka dym z tych wywo-a u ywane s przekazane do niego dane. Symbol & zastosowany we wstawce .set() zosta

opisany w nast pnym rozdziale.

Alternatywnym sposobem operowania na tablicy warto ci jest zastosowanie biblioteki wstawekfor, dost pnej na stronie https://github.com/seven-phases-max/less.curious/blob/master/articles/generic-for.md.

Korzystaj c ze struktury wstawki for, powy szy kod mo na zapisa w nast puj cej postaci:

@data: "small" 100px, "medium" 200px, "large" 400px;div { .for(@data); .-each(@width) { @classname: e(extract(@width,1)); &.@{classname} { width: extract(@width,2); } }}

Powy szy kod Lessa korzysta z dwóch funkcji wbudowanych, e() oraz extract(), które opi-sa em dok adniej w nast pnym rozdziale.

S owo kluczowe !importantOstatnim zagadnieniem przedstawionym w tym rozdziale b dzie s owo kluczowe !important.Zastosowanie tego s owa w deklaracji daje jej najwy szy priorytet w sytuacjach, gdy do jednegoelementu pasuje kilka selektorów. S owo kluczowe !important ma wy szy priorytet nawet odstylów podanych bezpo rednio w kodzie HTML elementów, co pokazuje poni szy przyk ad:

<style> p{color:green !important;}</style><p style="color:red;">zielony</p>

W przypadku u ycia powy szego kod przegl darka wy wietli tekst w kolorze zielonym. Jakpokazuje ten przyk ad, s owa kluczowego !important mo na u ywa , aby zmienia style, któ-





97

rych nie mo na edytowa , które, na przyk ad, zosta y podane bezpo rednio w kodzie HTML.Niemniej jednak tego s owa kluczowego nale y u ywa ostro nie, gdy jedynym sposobemprzes oni cia regu y, która z niego korzysta, jest napisanie innej regu y, w której tak e zostanieono u yte. Ka de nieprawid owe lub niepotrzebne zastosowanie s owa !important w kodzieLessa utrudni jego zrozumienie i utrzymanie.

W kodzie Lessa s owa kluczowego !important mo na u ywa nie tylko w odniesieniu do w a-ciwo ci, lecz tak e do ca ych wstawek. Je li !important zostanie u yte w wywo aniu wstawki, to

kompilator umie ci je równie we wszystkich w a ciwo ciach zadeklarowanych w danej wstawce.Ten sposób u ycia s owa kluczowego !important przedstawia nast puj cy przyk ad:

.mixin(){ property1: 1;property2: 2;}.class{ .mixin() !important;}

Powy szy kod Lessa zostanie skompilowany w nast puj cy sposób:

.class{ property1: 1 !important; property2: 2 !important;}

S owa kluczowego !important mo na tak e u ywa w zmiennych:

@color: red !important;div { color: @color;}

Skompilowanie tego kodu spowoduje wygenerowanie nast puj cego kodu CSS:

div { color: red !important;}

PodsumowanieW tym rozdziale przedstawi em zmienne i wstawki. Dowidzia e si w niego tak e, dlaczegodefiniowanie zmiennych i wstawek w jednym miejscu pozwala zmniejszy wielko kodu i upro-ci jego utrzymanie.

Z nast pnego rozdzia u dowiesz si jeszcze wi cej o wstawkach, sposobach ich zagnie d aniai rozszerzania. Oprócz tego przedstawi wbudowane funkcje Lessa, których mo na u ywa domanipulowania warto ciami we wstawkach i w innych miejscach kodu.





98




Skorowidz

Aanaliza plików Lessa, 213animacja, 45, 156animacja my-spin-effect, 48aplikacje

internetowe, 21mobilne, 230, 240Ruby on Rails, 241zewn trzne, 225

arkusz normalize.css, 42arkusze typu CSS reset, 42automatyczne

dodawanie prefiksów, 36kompilacje, 56od wie anie strony, 30, 211

Bbia y znak, 184biblioteka

3L, 147animate.css, 49, 157Clearless, 149jQuery, 216Less Elements, 143Less Hat, 146, 159Less-bidi, 155Modernizr, 115, 149more-or-less, 153PostCSS, 37Preboot, 152

-prefix-free, 37, 131, 157retina.js, 162SpriteMe, 150

biblioteki wstawek, 133, 142b d RuntimeError, 82b dy syntaktyczne, 32

CCSS3, 21CVS, comma-separated values, 40czcionka

Font Awesome, 119Glyphicons, 159Meteocons, 159, 161

czcionki ikonowe, 158

Ddebugowanie, 31, 53deklaracje zmiennych, 71, 72dodatek

Firebug, 26FireLESS, 32

dodawanieklas, 195prefiksów przegl darek, 36, 131

dokument first.html, 35dokumenty zestawienia stylów, 139DOM, Document Object Model, 101dopasowywanie argumentów, 91




Skorowidz

246

dost pno , 223dostosowywanie paska nawigacyjnego, 215DRY, don’t repeat yourself, 21dyrektywa @import, 42, 61, 166dzia ania, 99dziedziczenie, 23

Eedytor, 58efekt flipInX, 157ekrany Retina, 162elastyczne jednostki miary, 172element

body, 41, 192div, 41

elementy p ywaj ce, 184

FFlexbox grid, 27format

cvs, 81Markdown, 139

FOUC, 38framework

AngularJS, 239Bootstrap 3, 136, 201Cardinal, 226Ionic, 229Play, 237, 239Ratchet, 229Ruby on Rails, 241Semantic UI, 227tdcss.js, 140

funkcjaaverage(), 128calc(), 173contrast(), 123, 126darken(), 122, 124default(), 129desaturate(), 124difference(), 127e(), 120exclusion(), 128extract(), 119fade(), 125fadein(), 125

fadeout(), 125grayscale(), 126hardlight(), 128length(), 119lighten(), 122, 124lighter(), 73mix(), 125multiply(), 128negation(), 128overlay(), 128saturate(), 125screen(), 128softlight(), 128spin(), 125watch(), 30

funkcjedo czenia kolorów, 127niestandardowe, 129operuj ce na kolorach, 121, 124sprawdzaj ce typy, 129wbudowane, 99, 118

Ggradient

liniowy, 83t a, 43, 134, 136

graficzny interfejs u ytkownika, GUI, 58GUI, Graphical User Interface, 58

HHTML5, 22HTML5 Boilerplate, 148

Iidentyfikator

content, 182sidebar, 182

ikona, 160importowanie kodu CSS, 166instalowanie Bootstrapa, 210instrukcje warunkowe, 113integracja z projektami, 165interfejs u ytkownika, 231interpolacja zmiennych, 73




Skorowidz

247

JJavaScript, 118jednostka

em, 172px, 172

j zyk Ruby, 241

Kkana alfa, 121kaskada, 23, 41klasa, 104, 107

.article, 22

.screenreaders-only, 106klasy

Bootstrapa, 219siatki, 181

kodCSS, 23, 166, 169HTML, 22, 148Lessa, 27, 169semantyczny, 198

kolory, 115HSL, 121RGB, 121

kolumny, 205komentarze

specjalne, 64zagnie d one, 64

kompilacjakodu Lessa, 27, 56, 211po stronie serwera, 52

kompilator, 58, 235less.js, 28Less.php, 243

kompilatory alternatywne, 242komponent paska nawigacyjnego, 216kompresja kodu CSS, 55komunikat o b dzie, 32, 35konsola Package Manager Console, 243konwersja kodu CSS, 169

Lleniwe wczytywanie, 73, 202liczby, 115

listafunkcji, 119HTML, 158nawigacyjna, 121systemów siatek, 231

agodna degradacja, 135czenie kolorów, 127, 128

Mmagazyn lokalny, 31mapy ród owe CSS, 53mened er pakietów npm, 57metodologia

BEM, 59OOCSS, 59SMACSS, 59

migracja projektu, 169minimalizacja kodu CSS, 55mno enie kolorów, 124model flexbox, 25modyfikowanie wstawek, 90motyw

a11y, 223JBST, 235Sage, 234Semantic UI, 236

motywyBootstrapa, 222graficzne, 212

Nnag ówek, header, 35, 180narz dzia dla programistów, 136narz dzie

1pxdeep, 223CodeKIT, 58Crunch!, 58CSS Lint, 139CSS2Less, 170GIMP, 127Grunt, 56, 208Gulp, 56Lessify, 170




Skorowidz

248

narz dzienpm, 53, 208SimpLESS, 58StyleDocco, 139tdcss.js, 139Typesave activator, 238WinLESS, 58WordPress, 234

nazwa zmiennej, 68nieu ywany kod, 136Node.js, 53normalizacja wygl du stron, 147notacja CamelCase, 68

Oobrót, 48obs uga map ród owych CSS, 32odno nik, 160od wie anie strony, 30odwo ania do selektora nadrz dnego, 109okre lanie

szczegó owo ci, 24typu, 127

operacjearytmetyczne, 115na kolorach, 124

organizacja plików, 169organizowanie zmiennych, 70

Ppasek

nawigacyjny, 215post pów, 221

p tla, 94, 120, 153platforma Meteor, 240plecenie activator, 238plik

bootstrap.js, 216bootstrap.less, 213, 222bootswatch.less, 212bordered.less, 39boxsizing.less, 52, 105build.sbt, 239clearfix.less, 219content.less, 102, 193custombootstrap.less, 214customsidebar.less, 106

first.less, 35footer.less, 78gradient.less, 43grid.less, 197gulpfile.js, 57Gulpfile.js, 230header.less, 78, 102, 193index.html, 29mixins.less, 78, 219nav.less, 107normalize.less, 42, 137package.json, 208project.less, 172roundedcornersbordered.html, 38roundedcornersborderedmixins.less, 41semantic.css, 229sidebar.less, 101sprite.less, 151style.less, 224styles.css, 54styles.css.map, 54styles.less, 30, 105tdcss.js, 141theme.config, 228transition.less, 46utilities.less, 219variables.less, 66, 106, 212variablesnav.less, 122, 123Web.Config, 243WebJar, 239

plikiframeworku Semantic UI, 228ród owe Lessa, 169, 207

polyfill, 133postprocesor clean-css, 55prefiksy, 36, 211problem zaokr glania subpikselowego, 183program, Patrz narz dzieprogramowanie w oparciu o testy, TDD, 138projekty responsywne, 171przegl darka

Chrome, 32, 54, 136Firefox, 32, 138

przej cia, 45przekazywanie zestawów regu , 88, 114prze czniki, 90przestrzenie nazw, 107przetwarzanie w p tli, 95przyciski, 213




Skorowidz

249

pseudoelementy, 25pseudoklasa, 24

:hover, 45, 112extend, 111, 112

punkt graniczny, 178

Rregu a

@keyframes, 47ostatniej deklaracji, 202

regu ydla przegl darek, 35zagnie d one, 99

Reset CSS, 42resetowanie w a ciwo ci, 66responsywne

siatki, 178, 187strony, 171szablony Skeleton, 232witryny, 22

Retina, 162rozszerzanie siatek, 194rozszerzenie

NuGet, 243Web Essentials, 58, 244

Sscalanie w a ciwo ci, 117schemat kolorów, 223selektor extend, 112selektory

CSS, 22, 23nadrz dne, 109

semantyczny dobór nazwy, 68SEO, Search Engine Optimization, 148serwis

GitHub, 140, 208Stackoverflow.com, 140

siatka, 27, 176Bootstrapa, 202flexbox, 185frameworku Cardinal, 226Preboot, 188

siatkialternatywne, 183ma e, 198responsywne, 178, 187zagnie d one, 182

sie dystrybucji tre ci, 28s owo kluczowe !important, 96sprajt, 151stopka, footer, 35stosowanie

bibliotek wstawek, 133biblioteki

3L, 147Clearless, 149Less Elements, 143Less Hat, 146more-or-less, 153Preboot, 152retina.js, 163

CSS3, 22czcionek ikonowych, 158dyrektywy @import, 166funkcji watch, 30frameworku Bootstrap 3, 201JBST, 235klas, 104komentarzy, 64Lessa, 28ma ej siatki, 198map ród owych CSS, 53pseudoklas, 109regu zagnie d onych, 100selektorów CSS, 22Semantic UI, 227siatek, 176siatki Preboot, 188wartowników, 94wstawek, 46, 63, 77, 104zmiennych, 63, 65, 69

strukturaDOM, 101nawigacyjna, 99

symbol, Patrz znaksystem

ngBoilerplate, 240Preboot, 188, 191Semantic Grid System, 232Skeleton, 232Zen Grids, 184

szablon Skeleton, 232szablony wygl du, 148szczegó owo , 23szczegó owo selektora, 25




Skorowidz

250

rodowisko.NET, 243Node.js, 53PHPStorm, 58

TTDD, test-driven development, 138testowanie

kodu, 133, 138, 140kodu HTML, 148uk adu, 174

transformacje, 45tre , content, 35tworzenie

animacji, 156aplikacji, 21aplikacji mobilnych, 230, 240blogów, 234elastycznych uk adów, 172gradientów, 143gradientów t a, 43, 134klas siatki, 181motywów Bootstrapa, 222p tli, 94, 154projektów, 165przycisków, 213schematów kolorów, 223siatek, 177, 231uk adów, 25, 143uk adów wielokolumnowych, 145uk adu semantycznego, 192wstawki, 84zagnie d onych siatek, 182zaokr glonych wierzcho ków, 38zestawie stylów, 139

Uuk ad, 35, 67, 203

elastyczny, 172semantyczny, 192wielokolumnowy, 145

urz dzenia mobilne, 174, 175us uga Bootswatch, 212

Vvendor-specific rules, 35

Wwarto ci

domy lne, 79oddzielone przecinkami, CVS, 40, 117

wartowniki CSS, 93, 154wierzcho ki, 38w a ciwo

animation, 48background-image, 94border-radius, 38box-size, 49box-sizingborder-box, 61clip, 105display: inline-box, 184float, 177, 184transition-duration, 46

WordPress, 234wstawka

.box-sizing, 52

.make-column, 181, 195

.make-lg-column(), 207

.roundedcornersmixin(), 46

.widths(), 96box-shadow, 130, 147box-sizing, 78clearfix, 180grid.less, 196lesshat, 147

wstawki, 63biblioteki Less Hat, 146Bootstrapa, 219chronione, 91generuj ce gradient, 85gotowe, 142konwencje nazewnicze, 80modyfikowanie, 90parametry, 81proste, 78przetwarzanie w p tli, 95siatki, 205stosowanie, 77, 104tworzenie, 84wywo ywanie, 80




Skorowidz

251

wstawkiz parametrami, 79zestawy regu , 114z o one, 83zwracanie warto ci, 89

wtyczkaautoprefix, 26, 36, 52, 131autoprefixer, 133clean-css, 55CSS Usage, 138grunt-contrib-less, 208gulp-less, 57less.js, 147Pleeease, 133WP Less to CSS, 236

wtyczkiBootstrapa, 212Lessa, 33, 54WordPressa, 236

wygl d kodu HTML, 22wywo ywanie wstawek, 80

Zzagnie d anie

komentarzy, 64regu , 99selektorów, 103siatek, 182wartowników, 113

zaokr glanie subpikselowe, 183zaokr glone wierzcho ki, 38zapisywanie warto ci, 75zapytania medialne, 171, 195, 198zarz dzanie tre ci , 234zasada DRY, 21Zen Grids, 184zestawienia stylów, 139zmienna

@arguments, 86@menucolor, 122@rest, 86

zmienne, 63, 106, 115, 205deklaracja, 71, 72interpolacja, 73okre lanie nazw, 68organizowanie, 70specjalne, 86stosowanie, 65, 69

znak/, 116@, 65, 109, 113gwiazdki, 160

znaki czcionki Meteocon, 161zwracanie warto ci, 89




Skorowidz

252




http://program-partnerski.helion.pl

tytuł oryginału: less web development essentials, second ...spis tre ci o autorze 11 o...

Documents