Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00722 012125 17302603 na godz. na dobę w sumie
Less. Podstawy programowania - książka
Less. Podstawy programowania - książka
Autor: Liczba stron: 256
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-1754-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> wordpress
Porównaj ceny (książka, ebook (-25%), audiobook).
Less (Leaner CSS) jest preprocesorem CSS, dzięki któremu projektant witryny może tworzyć łatwy w utrzymaniu kod, który nadaje się do wielokrotnego użycia bez powielania tych samych jego fragmentów. Less doskonale realizuje zasadę DRY (ang. Do not Repeat Yourself — „nie powtarzaj się”). Rozszerza składnię CSS o zmienne, wstawki, funkcje i udostępnia wiele możliwości pozwalających na poprawę wydajności pracy projektanta. Ułatwia tworzenie atrakcyjnych witryn, a utrzymywanie już istniejących aplikacji jest dzięki niemu mniej czasochłonne.

Dzięki tej książce zrozumiesz filozofię działania Less, a co za tym idzie, zaczniesz pisać kod przejrzysty, czytelny, zwięzły i możliwy do wielokrotnego wykorzystania. Szybko zauważysz poprawę wydajności swojej pracy. Znajdziesz tu praktyczne porady dotyczące integracji Less z istniejącymi czy też nowymi projektami. Oszczędzisz dzięki temu sporo czasu. Zapewne docenisz to, że w książce tej przedstawiono także sposoby pisania i wykorzystania wtyczek Less, które ułatwiają sprostanie nawet bardzo specyficznym wymaganiom.

W książce omówiono między innymi:

Jeśli korzystasz z CSS — przekonaj się, jak świetnym narzędziem jest Less!


Autorem książki jest doświadczony projektant Bass Jobsen, który tworzy strony WWW od 1995 roku i używał przy tym chyba wszystkich możliwych języków programowania. Zawsze wypracowuje jak najbardziej funkcjonalny interfejs użytkownika. Właściwie codziennie korzysta z Less, w tym także przy tworzeniu motywów WordPressa, a przede wszystkim w pracy nad wspaniałym projektem StreetArt.nl. Jest znany z gotowości do dzielenia się swoją wiedzą z mniej doświadczonymi kolegami.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

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 HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: 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/lesspp Moż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ść Spis tre(cid:258)ci O autorze O recenzentach Przedmowa Rozdzia(cid:239) 1. Usprawnianie tworzenia aplikacji internetowych z u(cid:285)yciem Lessa 11 13 15 21 Stosowanie CSS3 do okre(cid:258)lania wygl(cid:200)du kodu HTML Stosowanie selektorów CSS do okre(cid:258)lania wygl(cid:200)du kodu HTML Szczegó(cid:239)owo(cid:258)(cid:202), dziedziczenie i kaskada w CSS Tworzenie uk(cid:239)adów z u(cid:285)yciem elastycznych pude(cid:239)ek Pocz(cid:200)tki stosowania Lessa Stosowanie funkcji watch do automatycznego od(cid:258)wie(cid:285)ania strony Debugowanie kodu Wtyczki 22 22 23 25 27 28 30 31 33 35 Regu(cid:239)y dla poszczególnych przegl(cid:200)darek 35 Zastosowanie w(cid:239)a(cid:258)ciwo(cid:258)ci border-radius do tworzenia zaokr(cid:200)glonych wierzcho(cid:239)ków 38 41 43 45 49 52 53 54 Stosowanie map (cid:283)ród(cid:239)owych CSS do debugowania Wtyczki Eliminowanie ró(cid:285)nic za pomoc(cid:200) rozwi(cid:200)za(cid:241) typu CSS reset Tworzenie gradientów t(cid:239)a Przej(cid:258)cia, transformacje i animacje CSS W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) box-size Kompilacja po stronie serwera Kompilacja kodu Lessa Pierwszy uk(cid:239)ad napisany z u(cid:285)yciem Lessa Poleć książkęKup książkę Spis tre(cid:286)ci Kompresja i minimalizacja kodu CSS Automatyczna kompilacja kodu Lessa do CSS Programy o graficznym interfejsie u(cid:285)ytkownika Metodologie OOCSS, SMACSS oraz BEM Podsumowanie Rozdzia(cid:239) 2. Stosowanie zmiennych i wstawek Stosowanie komentarzy w kodzie Lessa Zagnie(cid:285)d(cid:285)one komentarze Komentarze specjalne Stosowanie zmiennych Organizowanie plików Okre(cid:258)lanie nazw zmiennych Stosowanie zmiennych Organizowanie zmiennych Ostatnia deklaracja wygrywa! Deklaracje zmiennych nie s(cid:200) statyczne! Leniwe wczytywanie Interpolacja zmiennych Zapisywanie warto(cid:258)ci Stosowanie wstawek Proste wstawki Wstawki z parametrami Konwencje nazewnicze i sposoby wywo(cid:239)ywania wstawek Stosowanie wstawek z wi(cid:218)ksz(cid:200) liczb(cid:200) parametrów Z(cid:239)o(cid:285)ona wstawka generuj(cid:200)ca liniowy gradient t(cid:239)a Zwracanie warto(cid:258)ci ze wstawek Modyfikowanie zachowania wstawek S(cid:239)owo kluczowe !important Podsumowanie Rozdzia(cid:239) 3. Regu(cid:239)y zagnie(cid:285)d(cid:285)one, dzia(cid:239)ania oraz funkcje wbudowane Struktura nawigacyjna Stosowanie regu(cid:239) zagnie(cid:285)d(cid:285)onych Stosowanie wstawek i klas Zmienne Klasy i przestrzenie nazw Odwo(cid:239)ania do selektora nadrz(cid:218)dnego z u(cid:285)yciem symbolu Zagnie(cid:285)d(cid:285)anie wartowników i zastosowanie Przekazywanie zestawów regu(cid:239) do wstawek Dzia(cid:239)ania na liczbach, kolorach i zmiennych Scalanie w(cid:239)a(cid:258)ciwo(cid:258)ci Funkcje wbudowane JavaScript Lista funkcji 6 55 56 58 59 60 63 64 64 64 65 66 68 69 70 71 72 73 73 75 77 78 79 80 81 83 89 90 96 97 99 99 100 104 106 107 109 113 114 115 117 118 118 119 Poleć książkęKup książkę Stosowanie funkcji operuj(cid:200)cych na kolorach Funkcje darken() i lighten() Mno(cid:285)enie kolorów (cid:146)(cid:200)czenie kolorów w Lessie Okre(cid:258)lanie typu warto(cid:258)ci wej(cid:258)ciowej Rozszerzanie Lessa za pomoc(cid:200) w(cid:239)asnych funkcji Wstawka box-shadow Podsumowanie Rozdzia(cid:239) 4. Testowanie kodu i stosowanie gotowych bibliotek wstawek Ponowna analiza tworzenia gradientów t(cid:239)a z u(cid:285)yciem CSS Nieu(cid:285)ywany kod Testowanie kodu Prezentacja TDD Kilka s(cid:239)ów o zestawieniach stylów Gotowe wstawki Tworzenie gradientów i uk(cid:239)adów za pomoc(cid:200) biblioteki Less Elements Stosowanie obszernej biblioteki Less Hat Stosowanie biblioteki wstawek 3L Stosowanie biblioteki wstawek Clearless Stosowanie w projekcie gotowych wstawek biblioteki Preboot Stosowanie biblioteki more-or-less Biblioteka Less-bidi Stosowanie innych technik wykorzystuj(cid:200)cych Less Tworzenie animacji za pomoc(cid:200) Lessa Stosowanie czcionek ikonowych Retina.js Podsumowanie Rozdzia(cid:239) 5. Integracja Lessa z w(cid:239)asnymi projektami Importowanie kodu CSS do Lessa Stosowanie dyrektywy @import Stosowanie Lessa w istniej(cid:200)cych projektach Organizacja plików Konwersja kodu CSS do kodu Lessa Zapytania medialne i responsywne projekty stron Elastyczne jednostki miar w zapytaniach medialnych Tworzenie elastycznych uk(cid:239)adów Stosowanie siatek w uk(cid:239)adach i organizacji pracy Rola w(cid:239)a(cid:258)ciwo(cid:258)ci float w tworzeniu siatek Zastosowanie bardziej semantycznego rozwi(cid:200)zania Tworzenie uk(cid:239)adów z u(cid:285)yciem klas siatki Tworzenie zagnie(cid:285)d(cid:285)onych siatek Siatki alternatywne Tworzenie w(cid:239)asnego projektu z u(cid:285)yciem responsywnej siatki Stosowanie systemu siatki Preboot Spis tre(cid:286)ci 121 122 124 127 127 129 130 131 133 134 136 138 138 139 142 143 146 147 149 152 153 155 156 156 158 162 163 165 166 166 169 169 169 171 172 172 176 177 180 181 182 183 187 188 7 Poleć książkęKup książkę Spis tre(cid:286)ci Stosowanie wstawek siatki do tworzenia uk(cid:239)adu semantycznego Rozszerzanie siatek Dodawanie klas dla mniejszej siatki Stosowanie ma(cid:239)ej siatki w semantycznym kodzie HTML Podsumowanie Rozdzia(cid:239) 6. Stosowanie frameworku Bootstrap 3 Wprowadzenie do frameworku Bootstrap Siatka Bootstrapa Stosowanie plików Lessa frameworku Bootstrap Wtyczka Bootstrapa dla Lessa Podsumowanie Rozdzia(cid:239) 7. Stosowanie Lessa z aplikacjami zewn(cid:218)trznymi i innymi frameworkami Cardinal CSS Wtyczka Lessa dla frameworku Cardinal Stosowanie Semantic UI z Lessem Stosowanie Ionic z Lessem Dodawanie Lessa do procesu budowy frameworku Ionic Frameworki do tworzenia siatek korzystaj(cid:200)ce z Lessa Semantic Grid System Responsywny szablon Skeleton WordPress i Less Stosowanie motywu Sage z Lessem Stosowanie JBST i wbudowanego kompilatora Lessa Motyw Semantic UI do WordPressa Wtyczki WordPressa i Less Stosowanie Lessa z frameworkiem Play Stosowanie Bootstrapa z frameworkiem Play AngularJS i Less System ngBoilerplate Meteor i Less Ruby on Rails i Less Alternatywne kompilatory kodu Lessa Kompilator Less.php Kompilator .less dla (cid:258)rodowiska .NET Podsumowanie Skorowidz 8 192 194 195 198 199 201 202 202 207 212 224 225 226 226 227 229 230 231 232 232 234 234 235 236 236 237 239 239 240 240 241 242 243 243 244 245 Poleć książkęKup książkę 2 Stosowanie zmiennych i wstawek Niniejszy rozdzia(cid:239) jest po(cid:258)wi(cid:218)cony nieco dok(cid:239)adniejszej prezentacji Lessa, a konkretnie zagad- nieniom stosowania zmiennych i wstawek. Zmienne w kodzie Lessa s(cid:200) przewa(cid:285)nie definiowane w jednym miejscu, cho(cid:202) mo(cid:285)na ich u(cid:285)ywa(cid:202) i zmienia(cid:202) ich warto(cid:258)ci. W Lessie zmienn(cid:200) mo(cid:285)na napisa(cid:202) przez umieszczenie za ni(cid:200) definicji. Zmienne s(cid:200) u(cid:285)ywane do definiowania cz(cid:218)sto stoso- wanych warto(cid:258)ci, dzi(cid:218)ki czemu mo(cid:285)na je edytowa(cid:202) tylko w jednym miejscu. Bazuj(cid:200)c na zasa- dzie DRY (nie powtarzaj si(cid:218)), u(cid:285)ywanie zmiennych do zapisywania cz(cid:218)sto stosowanych warto(cid:258)ci pomaga w tworzeniu witryn, których utrzymanie jest (cid:239)atwiejsze. Z kolei wstawki s(cid:239)u(cid:285)(cid:200) do okre(cid:258)lania w(cid:239)a(cid:258)ciwo(cid:258)ci klas. Dzi(cid:218)ki nim w jednym wierszu kodu mo(cid:285)na po(cid:239)(cid:200)czy(cid:202) wiele deklaracji i u(cid:285)ywa(cid:202) ich w wielu miejscach kodu. W tym rozdziale przedstawi(cid:218) sposób tworzenia wstawek, korzystania z nich oraz ich wielokrotnego u(cid:285)ywania w projektach, jak równie(cid:285) stosowania do tworzenia lepszych arkuszy stylów CSS bez powielania kodu. W tym rozdziale przedstawi(cid:218) nast(cid:218)puj(cid:200)ce zagadnienia: (cid:81) Stosowanie komentarzy w kodzie Lessa. (cid:81) Stosowanie zmiennych. (cid:81) Interpolacja zmiennych. (cid:81) Sposoby zapisywania warto(cid:258)ci. (cid:81) Stosowanie wstawek. Poleć książkęKup książkę Less. Podstawy programowania Stosowanie komentarzy w kodzie Lessa Komentarze sprawiaj(cid:200), (cid:285)e kod staje si(cid:218) bardziej przejrzysty i zrozumia(cid:239)y dla innych. To bardzo wa(cid:285)ne, by móc precyzyjnie zrozumie(cid:202) przeznaczenie i dzia(cid:239)anie analizowanego kodu. W(cid:239)a(cid:258)nie z tego powodu na samym pocz(cid:200)tku tego rozdzia(cid:239)u przedstawi(cid:218) kilka informacji i przyk(cid:239)adów komentarzy. Wskazówka Nie nale(cid:285)y ogranicza(cid:202) liczby i wielko(cid:258)ci komentarzy, maj(cid:200)c na uwadze wielko(cid:258)(cid:202) plików, czas ich pobie- rania oraz wydajno(cid:258)(cid:202) dzia(cid:239)ania stron. W ramach procesu kompilacji i minimalizacji wynikowego kodu CSS wszystkie komentarze i inne fragmenty kodu s(cid:239)u(cid:285)(cid:200)ce do okre(cid:258)lania jego struktury praktycznie rzecz bior(cid:200)c zostan(cid:200) ca(cid:239)kowicie usuni(cid:218)te. Zatem w celu poprawienia przejrzysto(cid:258)ci kodu i u(cid:239)atwienia jego zrozumienia mo(cid:285)na dodawa(cid:202) komentarze bez (cid:285)adnych ogranicze(cid:241). Komentarze w kodzie Lessa mo(cid:285)na dodawa(cid:202) dok(cid:239)adnie tak samo, jak robi si(cid:218) to w kodzie CSS. Tekst komentarza jest zapisywany mi(cid:218)dzy sekwencjami znaków /* i */. Oprócz tego Less pozwala na tworzenie komentarzy, które rozpoczynaj(cid:200) si(cid:218) od sekwencji znaków // i obejmuj(cid:200) ca(cid:239)(cid:200) dalsz(cid:200) zawarto(cid:258)(cid:202) wiersza. Jedynie prawdziwe komentarze CSS (/* */) b(cid:218)d(cid:200) kopiowane do wygenerowanego arkusza sty- lów CSS. Nawet jednak one zostan(cid:200) usuni(cid:218)te z kodu CSS w wyniku jego minimalizacji. Poni(cid:285)szy przyk(cid:239)ad pozwala przekona(cid:202) si(cid:218), w jaki sposób dzia(cid:239)aj(cid:200) komentarze w kodzie Lessa: /* Komentarz Bassa .mixins() { ~ ta wstawka jest umieszczona w komentarzu ;} */ Zagnie(cid:285)d(cid:285)one komentarze Cho(cid:202) Less, podobnie jak PHP i JavaScript, nie pozwala na zagnie(cid:285)d(cid:285)anie komentarzy, to jednak nic nie stoi na przeszkodzie, by umieszcza(cid:202) komentarze jednowierszowe, zaczynaj(cid:200)ce si(cid:218) od sekwencji znaków //, wewn(cid:200)trz normalnych. Takie zagnie(cid:285)d(cid:285)one komentarze przedstawia poni(cid:285)szy przyk(cid:239)ad: /* // komentarz zagnie(cid:285)d(cid:285)ony */ Komentarze specjalne Narz(cid:218)dzia do minimalizacji kodu definiuj(cid:200) czasami specjaln(cid:200) sk(cid:239)adni(cid:218) komentarzy, by pozwoli(cid:202) na umieszczanie w zminimalizowanym kodzie wa(cid:285)nych komentarzy, takich jak informacje o licencji. Tej sk(cid:239)adni mo(cid:285)na u(cid:285)ywa(cid:202), by umieszcza(cid:202) na pocz(cid:200)tku swojego arkusza stylów postano- 64 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Stosowanie zmiennych i wstawek wienia licencyjne. W przypadku stosowania wtyczki clean-css i jej minimalizatora u(cid:285)ywanego przez kompilator Lessa dzia(cid:239)aj(cid:200)cy z poziomu wiersza polece(cid:241) takie wa(cid:285)ne komentarze nale(cid:285)y umieszcza(cid:202) mi(cid:218)dzy sekwencjami znaków /*! i !*/, jak w poni(cid:285)szym przyk(cid:239)adzie: /*! bardzo wa(cid:285)ny komentarz! !*/ Uwaga Trzeba pami(cid:218)ta(cid:202), (cid:285)e przed zastosowaniem opcji -clean-css konieczne b(cid:218)dzie zainstalowanie wtyczki Lessa clean-css. Mo(cid:285)na to zrobi(cid:202), wykonuj(cid:200)c nast(cid:218)puj(cid:200)ce polecenie: npm install less-plugin-clean-css Stosowanie zmiennych Zmienne w Lessie u(cid:239)atwiaj(cid:200) utworzenie odpowiedniej organizacji plików i upraszczaj(cid:200) ich utrzymanie. Pozwalaj(cid:200) na okre(cid:258)lanie cz(cid:218)sto u(cid:285)ywanych warto(cid:258)ci w jednym miejscu, a nast(cid:218)pnie stosowanie ich w ca(cid:239)ym pozosta(cid:239)ym kodzie Lessa. Zmiennych mo(cid:285)na u(cid:285)ywa(cid:202), na przyk(cid:239)ad, do ustawiania finalnych warto(cid:258)ci w(cid:239)a(cid:258)ciwo(cid:258)ci arkusza stylów. Wyobra(cid:283) sobie, (cid:285)e ju(cid:285) nigdy wi(cid:218)cej nie b(cid:218)dziesz musia(cid:239) wyszukiwa(cid:202) w arkuszach stylów wszystkich deklaracji konkretnego koloru. A w jaki sposób dzia(cid:239)aj(cid:200) zmienne? Otó(cid:285) zmienne musz(cid:200) mie(cid:202) nazwy, które zaczynaj(cid:200) si(cid:218) od znaku @. Przyk(cid:239)adami nazw zmiennych mog(cid:200) by(cid:202) @color, @size czy te(cid:285) @tree. W nazwach zmiennych mo(cid:285)na umieszcza(cid:202) znaki alfanumeryczne, znaki podkre(cid:258)lenia oraz minusy. Oznacza to, (cid:285)e @this-is-va (cid:180)riable-name-with-35-chars jest prawid(cid:225)ow(cid:261) nazw(cid:261) zmiennej. Niestety stosowanie znaku @ w kodzie Lessa jest troch(cid:218) niejednoznaczne. Jak wiesz z poprzednie- go rozdzia(cid:239)u, znak @ jest tak(cid:285)e u(cid:285)ywany w nazwach parametrów wstawek. A to jeszcze nie wszystko! Poniewa(cid:285) prawid(cid:239)owy kod CSS jest jednocze(cid:258)nie prawid(cid:239)owym kodem Lessa, znak @ mo(cid:285)e si(cid:218) tak(cid:285)e pojawia(cid:202) na pocz(cid:200)tku zapyta(cid:241) medialnych. Jednak na podstawie kontekstu mo(cid:285)na precyzyjnie okre(cid:258)li(cid:202), czy znak @ zosta(cid:239) u(cid:285)yty na pocz(cid:200)tku deklaracji zmiennej. Je(cid:258)li na pod- stawie kontekstu nie da si(cid:218) jednoznacznie okre(cid:258)li(cid:202) znaczenia znaku @, to zostanie ono opisane w tre(cid:258)ci niniejszej ksi(cid:200)(cid:285)ki. Zmiennej mo(cid:285)na przypisa(cid:202) warto(cid:258)(cid:202) — taki zapis jest nazywany deklaracj(cid:200). Warto(cid:258)ciami zmien- nych mog(cid:200) by(cid:202) liczby, wielko(cid:258)ci wyra(cid:285)one w pikselach, (cid:239)a(cid:241)cuchy znaków, listy, a nawet kom- pletne zestawy regu(cid:239). Zestaw regu(cid:239) zapisany w zmiennej jest okre(cid:258)lany jako „oddzielony” (ang. detached ruleset). W celu przypisania warto(cid:258)ci do zmiennej nale(cid:285)y u(cid:285)y(cid:202) znaku dwukropka (:). Deklaracja ko(cid:241)czy si(cid:218) natomiast znakiem (cid:258)rednika (;). Oto kilka przyk(cid:239)adów deklaracji: 65 Poleć książkęKup książkę Less. Podstawy programowania @width: 10px; @color: blue; @list: a b c d; @csv-list: a, b, c, d; @escaped-value: ~ dark@{color} ; Od momentu udost(cid:218)pnienia Lessa w wersji 1.7 w zmiennych mo(cid:285)na tak(cid:285)e zapisywa(cid:202) grupy w(cid:239)a(cid:258)ciwo(cid:258)ci, zagnie(cid:285)d(cid:285)one zestawy regu(cid:239), deklaracje u(cid:285)ywanych mediów, a nawet inne fragmenty kodu Lessa. Taki kod nale(cid:285)y umieszcza(cid:202) wewn(cid:200)trz pary nawiasów klamrowych, dok(cid:239)adnie tak samo jak w przypadku wstawek. Jest on okre(cid:258)lany jako oddzielony zestaw regu(cid:239). Taki oddzielony zestaw regu(cid:239) przedstawia poni(cid:285)szy przyk(cid:239)ad: @detached-ruleset: { color: white; font-size: small; }; Zestaw regu(cid:239) zadeklarowany w powy(cid:285)szym przyk(cid:239)adzie mo(cid:285)e by(cid:202) u(cid:285)ywany w nast(cid:218)puj(cid:200)cy sposób: p { @detached-ruleset(); } Po zadeklarowaniu zmiennej mo(cid:285)na u(cid:285)ywa(cid:202) jej w dowolnym miejscu kodu, by odwo(cid:239)a(cid:202) si(cid:218) do przypisanej jej warto(cid:258)ci. Ta mo(cid:285)liwo(cid:258)(cid:202) sprawia, (cid:285)e stosowanie zmiennych w kodzie Lessa za- pewnia niezwykle du(cid:285)e mo(cid:285)liwo(cid:258)ci. Organizowanie plików Jak zauwa(cid:285)y(cid:239)e(cid:258), wystarczy raz zadeklarowa(cid:202) zmienn(cid:200), by móc jej u(cid:285)ywa(cid:202) w dowolnym miejscu kodu. A zatem aby zmienia(cid:202) warto(cid:258)ci zmiennych, tak(cid:285)e wystarczy robi(cid:202) to w jednym miejscu. Na przyk(cid:239)ad kod mo(cid:285)e definiowa(cid:202) zmienne w odr(cid:218)bnym pliku o nazwie less/variables.less. To doskona(cid:239)y sposób organizowania plików. Je(cid:258)li w przysz(cid:239)o(cid:258)ci pojawi si(cid:218) konieczno(cid:258)(cid:202) wprowa- dzenia jakiej(cid:258) zmiany, b(cid:218)dzie wiadomo, gdzie to nale(cid:285)y zrobi(cid:202). Wracaj(cid:200)c do przyk(cid:239)adów resetowania w(cid:239)a(cid:258)ciwo(cid:258)ci CSS oraz okre(cid:258)lania postaci obramowa(cid:241) i sposobu wymiarowania elementów przedstawionych w poprzednim rozdziale, mo(cid:285)na przyj(cid:200)(cid:202), (cid:285)e nasz g(cid:239)ówny plik Lessa b(cid:218)dzie obecnie mia(cid:239) nast(cid:218)puj(cid:200)c(cid:200) posta(cid:202): @import less/normalize.less ; @import less/boxsizing.less ; @import less/mixins.less ; @import less/variables.less ; W powy(cid:285)szym kodzie dyrektywa @import importuje kod ze wskazanego pliku do g(cid:239)ównego pliku Lessa. Nazwy plików s(cid:200) zapisywane mi(cid:218)dzy znakami cudzys(cid:239)owu, a za nimi jest umieszczony (cid:258)rednik. Oprócz plików Lessa mo(cid:285)na importowa(cid:202) arkusze stylów CSS, które nie b(cid:218)d(cid:200) przetwarzane przez dyrektywy Lessa. Takie rozwi(cid:200)zanie przedstawi(cid:218) i dok(cid:239)adniej opisz(cid:218) w rozdziale 5., „Integracja Lessa z w(cid:239)asnymi projektami”. 66 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Stosowanie zmiennych i wstawek Spróbujmy teraz otworzy(cid:202) w przegl(cid:200)darce stron(cid:218) http://localhost/rozdzial_02/index.html. Zostanie wy(cid:258)wietlona strona o bardzo prostym uk(cid:239)adzie, zawieraj(cid:200)ca nag(cid:239)ówek, blok tre(cid:258)ci, menu boczne oraz stopk(cid:218) sk(cid:239)adaj(cid:200)c(cid:200) si(cid:218) z trzech kolumn. Posta(cid:202) tej strony przedstawia rysunek 2.1. Wszystkie elementy menu maj(cid:200) niebieskie akcenty. Teraz otwórzmy w ulubionym edytorze pliki less/ variables.less. Rysunek 2.1. Uk(cid:239)ad strony okre(cid:258)lony w kodzie Lessa Ciekawo(cid:258)(cid:202) zapewne kaza(cid:239)a Ci ju(cid:285) wcze(cid:258)niej otworzy(cid:202) ten plik. Nie nale(cid:285)y ba(cid:202) si(cid:218) jego z(cid:239)o(cid:285)o- no(cid:258)ci. Zarówno ten kod, jak i ca(cid:239)y uk(cid:239)ad maj(cid:200) za zadanie pokaza(cid:202) ogromne mo(cid:285)liwo(cid:258)ci stoso- wania zmiennych i wygod(cid:218) deklarowania ich w jednym miejscu. Takie rozwi(cid:200)zania znacznie lepiej jest zademonstrowa(cid:202) na bardziej z(cid:239)o(cid:285)onych i realistycznych przyk(cid:239)adach ni(cid:285) na kodzie licz(cid:200)cym kilka wierszy d(cid:239)ugo(cid:258)ci. Niemniej jednak wszystkie pozosta(cid:239)e przyk(cid:239)ady przedstawione w tym rozdziale doskonale wyja(cid:258)ni(cid:200) zasady stosowania zmiennych. Zanim si(cid:218) zorientujesz, b(cid:218)dziesz doskonale rozumia(cid:239) kod umieszczony w tym pliku. W ramach pierwszego tekstu warto(cid:258)(cid:202) zmiennej @dark-color zapisanej w pliku less/variables.less zmie(cid:241)my z darkblue na darkgreen. Po zapisaniu pliku sprawd(cid:283)my, jakie ta zmiana da(cid:239)a efekty — je(cid:258)li jeszcze nie u(cid:285)ywasz funkcji Lessa #!watch, konieczne b(cid:218)dzie od(cid:258)wie(cid:285)enie strony w prze- gl(cid:200)darce. Teraz uk(cid:239)ad b(cid:218)dzie mia(cid:239) akcenty koloru zielonego. Je(cid:258)li kogo(cid:258) nie przekona(cid:239)a jeszcze przydat- no(cid:258)(cid:202) zmiennych, to zapewne ta demonstracja rozwia(cid:239)a wszelkie w(cid:200)tpliwo(cid:258)ci. Oczywi(cid:258)cie w prak- tyce nie da si(cid:218) zmieni(cid:202) wygl(cid:200)du ca(cid:239)ej witryny, modyfikuj(cid:200)c pojedynczy wiersz kodu, ale ten przyk(cid:239)ad wyra(cid:283)nie pokazuje, (cid:285)e Less potrafi znacz(cid:200)co u(cid:239)atwi(cid:202) prac(cid:218) projektantów. Za(cid:239)ó(cid:285)my, (cid:285)e w(cid:239)a(cid:258)nie zako(cid:241)czyli(cid:258)my prac(cid:218) nad ciemnozielonym uk(cid:239)adem witryny i pokazujemy j(cid:200) szefowi. „(cid:165)wietna robota! — mówi szef. — Wiem, (cid:285)e prosi(cid:239)em o zielony, ale je(cid:258)li nie masz 67 Poleć książkęKup książkę Less. Podstawy programowania nic przeciwko, wola(cid:239)bym jednak witryn(cid:218) w kolorze czerwonym”. Dzi(cid:218)ki zastosowaniu zmiennych Lessa mo(cid:285)emy si(cid:218) u(cid:258)miechn(cid:200)(cid:202) i zmieni(cid:202) w pliku less/variables.less warto(cid:258)(cid:202) zmiennej @dark-color z darkgreen na darkred. Jak wida(cid:202), kod HTML strony jest przejrzysty i prosty — bez stylów umieszczanych bezpo- (cid:258)rednio w znacznikach HTML, a nawet bez nazw klas. Pojawi(cid:239) si(cid:218) jednak inny problem, na który nale(cid:285)y zwróci(cid:202) uwag(cid:218): trzeba b(cid:218)dzie okre(cid:258)la(cid:202) nazwy zmiennych, deklarowa(cid:202) je i zapisy- wa(cid:202) w sprytny i odpowiedni sposób. Nale(cid:285)y przy tym zachowa(cid:202) konsekwencj(cid:218), gdy(cid:285) zagadnie- nie to ma naprawd(cid:218) du(cid:285)e znaczenie. Podczas organizowania zmiennych trzeba zawsze robi(cid:202) to w ten sam sposób, stosowa(cid:202) te same konwencje nazewnicze i we wszystkich miejscach kodu, gdzie kontekst nie jest dostatecznie jasny, nale(cid:285)y stosowa(cid:202) komentarze. Pami(cid:218)taj, (cid:285)e kto(cid:258) inny powinien móc w dowolnym momencie przej(cid:200)(cid:202) prace nad kodem i zrozumie(cid:202) go bez (cid:285)adnej pomocy. By to zagwarantowa(cid:202), musisz nieco dok(cid:239)adniej pozna(cid:202) zmienne. Okre(cid:258)lanie nazw zmiennych Zmiennym zawsze nale(cid:285)y nadawa(cid:202) znacz(cid:200)ce i opisowe nazwy. Nazwy takie jak @a1 i @a2 zostan(cid:200) skompilowane, ale nie s(cid:200) zbyt dobre, bo kiedy liczba zmiennych si(cid:218) powi(cid:218)kszy lub trzeba b(cid:218)dzie co(cid:258) zmieni(cid:202) g(cid:239)(cid:218)boko w kodzie, trudno b(cid:218)dzie sobie przypomnie(cid:202), do czego s(cid:239)u(cid:285)y(cid:239)a zmienna @a2. Trzeba zatem b(cid:218)dzie odszuka(cid:202) jej kontekst, by dowiedzie(cid:202) si(cid:218), do czego by(cid:239)a u(cid:285)ywana w plikach Lessa, albo jeszcze gorzej: trzeba b(cid:218)dzie przeanalizowa(cid:202) elementy HTML, by sprawdzi(cid:202), jakie regu(cid:239)y CSS s(cid:200) w nich u(cid:285)ywane, aby na ich podstawie okre(cid:258)li(cid:202) kontekst kodu Lessa. W takiej przykrej sytuacji b(cid:218)dziesz musia(cid:239) zacz(cid:200)(cid:202) prac(cid:218) od pocz(cid:200)tku. Przyk(cid:239)adami dobrych nazw zmiennych s(cid:200) @nav-tabs-active-link-hover-border-color oraz @dark-color. Obie s(cid:200) znacz(cid:200)ce i opisowe, gdy(cid:285) wyja(cid:258)niaj(cid:200) przeznaczenie zmiennej, a nie jej warto(cid:258)(cid:202). Proces pozwalaj(cid:200)cy tworzy(cid:202) takie nazwy zmiennych jest okre(cid:258)lamy mianem seman- tycznego doboru nazw. A zatem nazwa @dark-color jest lepsza od @red. Co wi(cid:218)cej, w niektó- rych przypadkach warto wybiera(cid:202) nazwy, które b(cid:218)d(cid:200) jeszcze bardziej szczegó(cid:239)owe, na przyk(cid:239)ad @brand-color. Zmienna o takiej nazwie mog(cid:239)aby zawiera(cid:202) kolor stanowi(cid:200)cy g(cid:239)ówny motyw kolo- rystyczny projektu witryny, podobnie jak zmienna @dark-color zastosowana w ostatnim przy- k(cid:239)adzie. Je(cid:258)li taki kolor zostanie zmieniony, na przyk(cid:239)ad z ciemnoczerwonego na jasnozielony, to zmienna @brand-color: lightgreen wci(cid:200)(cid:285) b(cid:218)dzie mie(cid:202) sensown(cid:200) nazw(cid:218). Niemniej jednak w przypadku deklaracji @dark-color: lightgreen czy te(cid:285) @red: lightgreen nie mo(cid:285)na powie- dzie(cid:202), (cid:285)e nazwy zmiennych zosta(cid:239)y w(cid:239)a(cid:258)ciwie dobrane. W powy(cid:285)szych przyk(cid:239)adach poszczególne s(cid:239)owa tworz(cid:200)ce nazwy zmiennych s(cid:200) od siebie oddzie- lane znakami minusa, ponadto nazwy s(cid:200) w ca(cid:239)o(cid:258)ci zapisywane ma(cid:239)ymi literami. Nie istniej(cid:200) (cid:285)adne (cid:258)cis(cid:239)e regu(cid:239)y narzucaj(cid:200)ce konieczno(cid:258)(cid:202) stosowania takiego sposobu zapisu nazw; wielu programistów stosuje popularny, alternatywny sposób zapisu nazw okre(cid:258)lany jako notacja CamelCase. W tej notacji dwie przedstawione wcze(cid:258)niej nazwy zmiennych mia(cid:239)yby posta(cid:202) @navTabsActiveLinkHoverBorderColor i @darkColor. Obie przedstawione metody zapisu nazw poprawiaj(cid:200) przejrzysto(cid:258)(cid:202) kodu. 68 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Stosowanie zmiennych i wstawek Wskazówka Podczas pisania kodu CSS i HTML przywyk(cid:239)e(cid:258) zapewne do stosowania nazw sk(cid:239)adaj(cid:200)cych si(cid:218) z dwóch s(cid:239)ów oddzielonych znakiem minusa i zapisywanych ma(cid:239)ymi literami nazw klas, identyfikatorów, czcionek oraz innych elementów kodu. Ta konwencja zosta(cid:239)a tak(cid:285)e zastosowana w niniejszej ksi(cid:200)(cid:285)ce, a zatem wszystkie nazwy b(cid:218)d(cid:200) zapisywane ma(cid:239)ymi literami, a ich poszczególne s(cid:239)owa oddzielane od siebie znakiem minusa. To, czy kto(cid:258) preferuje notacj(cid:218) CamelCase czy zapis z minusami, nie ma szczególnego znaczenia. Du(cid:285)o wa(cid:285)niejsze jest to, by wybran(cid:200) konwencj(cid:218) nazewnicz(cid:200) stosowa(cid:202) konsekwentnie i we wszystkich plikach z kodem Lessa. Wskazówka Stosowanie nazw ze s(cid:239)owami oddzielanymi znakami minusa mo(cid:285)e przysporzy(cid:202) pewnych problemów w przypadku wykonywania oblicze(cid:241) arytmetycznych. W takich przypadkach konieczne b(cid:218)dzie dodawanie znaków odst(cid:218)pu. Na przyk(cid:239)ad deklaracja odwo(cid:239)uj(cid:200)ca si(cid:218) do warto(cid:258)ci zmiennej @value pomniejszonej o 1, @value-1, zostanie potraktowana jako jedna nazwa zmiennej, a nie wyra(cid:285)enie @value -1. Stosowanie zmiennych Wraz ze stopniowym powi(cid:218)kszaniem si(cid:218) projektu w którym(cid:258) momencie przestanie by(cid:202) mo(cid:285)liwe zapisywanie warto(cid:258)ci wszystkich w(cid:239)a(cid:258)ciwo(cid:258)ci CSS w zmiennych. Wówczas konieczne b(cid:218)dzie podj(cid:218)cie decyzji, które warto(cid:258)ci powinny zosta(cid:202) zapisane w zmiennych, a które b(cid:218)d(cid:200) podane na sta(cid:239)e. Nie istniej(cid:200) (cid:285)adne (cid:258)cis(cid:239)e regu(cid:239)y okre(cid:258)laj(cid:200)ce, jak nale(cid:285)y dokonywa(cid:202) takiego wyboru, ale w nast(cid:218)pnych akapitach znajdziesz porady dotycz(cid:200)ce tego, jak to robi(cid:202). Przede wszystkim nale(cid:285)y znale(cid:283)(cid:202) takie warto(cid:258)ci w(cid:239)a(cid:258)ciwo(cid:258)ci, które s(cid:200) u(cid:285)ywane w kodzie wi(cid:218)- cej ni(cid:285) jeden raz. Wielokrotne wyst(cid:218)powanie warto(cid:258)ci jest oczywistym sygna(cid:239)em sugeruj(cid:200)cym mo(cid:285)liwo(cid:258)(cid:202) zastosowania zmiennej. W poprzednim przyk(cid:239)adzie tak(cid:200) warto(cid:258)ci(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci jest zmienna @dark-color. Oprócz tego zmienne mo(cid:285)na stosowa(cid:202) we w(cid:239)a(cid:258)ciwo(cid:258)ciach u(cid:285)ywanych do dostosowywania wygl(cid:200)du projektu. Przyk(cid:239)adem takiej zmiennej mo(cid:285)e by(cid:202) @basic-width. Warto te(cid:285) zastanowi(cid:202) si(cid:218) nad tworzeniem zmiennych do przechowywania komponentów, które b(cid:218)d(cid:200) wielokrotnie stosowane w kodzie. Wracaj(cid:200)c do przedstawionego przyk(cid:239)adu, mo(cid:285)na by uzna(cid:202), (cid:285)e nag(cid:239)ówek strony b(cid:218)dzie u(cid:285)ywany tak(cid:285)e w innych projektach. Aby zapewni(cid:202) tak(cid:200) mo(cid:285)liwo(cid:258)(cid:202), nale(cid:285)a(cid:239)oby utworzy(cid:202) nowy plik, less/header.less, i zaimportowa(cid:202) go do pliku g(cid:239)ównego przy u(cid:285)yciu dyrektywy: @import less/header.less ; 69 Poleć książkęKup książkę Less. Podstawy programowania Organizowanie zmiennych Aby zapewni(cid:202) mo(cid:285)liwo(cid:258)(cid:202) wielokrotnego stosowania komponentów, mo(cid:285)na umieszcza(cid:202) takie komponenty lub funkcje w odr(cid:218)bnych plikach Lessa i odpowiednio do nich dostosowa(cid:202) u(cid:285)ywane zmienne. W ramach prezentacji takiego rozwi(cid:200)zania podzielimy nasz przyk(cid:239)adowy plik Lessa na trzy nowe pliki: less/header.less, less/content.less oraz less/footer.less. Oto zawarto(cid:258)(cid:202) 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(cid:202) uwag(cid:218), (cid:285)e zmienna @dark-color zosta(cid:239)a zmieniona na @header-dark-color. Wy(cid:258)wietlmy teraz w przegl(cid:200)darce stron(cid:218) http://localhost/rozdzial_02/project.html, a w edytorze otwórzmy plik less/project.less, aby si(cid:218) przekona(cid:202), jakie zmiany zosta(cid:239)y w nim wprowadzone i jakie s(cid:200) ich efekty. Teraz do(cid:239)(cid:200)czmy do g(cid:239)ównego pliku less/project.less plik less/header.less, u(cid:285)ywaj(cid:200)c dyrektywy @import header.less ;, a w pliku less/variablesproject.less utwórzmy sekcj(cid:218) zawieraj(cid:200)c(cid:200) poni(cid:285)szy fragment kodu: /* nag(cid:239)ówek (header) */ @header-dark-color: @dark-color; @header-light-color: @light-color; @header-height: 75px; Instrukcja @header-dark-color: @dark-color; zapisuje warto(cid:258)(cid:202) zmiennej @dark-color w zmien- nej @header-dark-color. Teraz, w dok(cid:239)adnie taki sam sposób, nale(cid:285)y okre(cid:258)li(cid:202) zawarto(cid:258)(cid:202) plików less/content.less i less/footer.less i do(cid:239)(cid:200)czy(cid:202) je do g(cid:239)ównego pliku Lessa. Jak mo(cid:285)na zauwa(cid:285)y(cid:202), po wprowadzeniu tych zmian wygl(cid:200)d strony http://localhost/rozdzial_02/project.html si(cid:218) nie zmieni(cid:239). A teraz spróbujmy otworzy(cid:202) w edytorze plik less/variablesproject.less i zmieni(cid:202) sekcj(cid:218) doty- cz(cid:200)c(cid:200) stopki w nast(cid:218)puj(cid:200)cy sposób: 70 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Stosowanie zmiennych i wstawek /* stopka (footer) */ @footer-dark-color: darkgreen; @footer-light-color: lightgreen; @footer-height: 100px; @footer-gutter: 10px; Jak widzisz, elementy wy(cid:258)wietlone w stopce strony s(cid:200) teraz zielone. Ostatnia deklaracja wygrywa! W poprzednim rozdziale przeczyta(cid:239)e(cid:258) o kaskadzie CSS, której ostatnia regu(cid:239)a g(cid:239)osi, (cid:285)e o ile warto(cid:258)ci pozosta(cid:239)ych regu(cid:239) b(cid:218)d(cid:200) identyczne, to wygrywa warto(cid:258)(cid:202) zadeklarowana jako ostatnia. Less stosuje dok(cid:239)adnie t(cid:218) sam(cid:200) strategi(cid:218) — w ca(cid:239)ym poprzednim kodzie b(cid:218)dzie stosowana warto(cid:258)(cid:202) podana w ostatniej deklaracji zmiennej. Pod tym wzgl(cid:218)dem zmienne Lessa mo(cid:285)na by porówna(cid:202) ze sta(cid:239)ymi stosowanymi w innych j(cid:218)zykach programowania. W poni(cid:285)szym przyk(cid:239)adzie, zgodnie z zasad(cid:200), (cid:285)e ostatnia deklaracja wygrywa, warto(cid:258)ci(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci property b(cid:218)dzie 2: @value: 1; .class{ property: @value; } @value: 2; Ten kod Lessa zostanie skompilowany do nast(cid:218)puj(cid:200)cego kodu CSS: .class{ property: 2; } Okazuje si(cid:218), (cid:285)e Less w pierwszej kolejno(cid:258)ci wczytuje ca(cid:239)y kod. Tam, gdzie ma zosta(cid:202) u(cid:285)yta warto(cid:258)(cid:202) zmiennej, Less zastosuje ostatni(cid:200) zadeklarowan(cid:200) b(cid:200)d(cid:283) ostatni(cid:200) odczytan(cid:200) warto(cid:258)(cid:202). Regu(cid:239)a okre(cid:258)laj(cid:200)ca, (cid:285)e wygrywa ostatnia deklaracja zmiennej, odnosi si(cid:218) wy(cid:239)(cid:200)cznie do deklaracji zdefiniowanych w tym samym zasi(cid:218)gu. W wi(cid:218)kszo(cid:258)ci j(cid:218)zyków programowania zasi(cid:218)gi s(cid:200) definiowane jako fragmenty kodu, które kompi- lator mo(cid:285)e przetwarza(cid:202) niezale(cid:285)nie od pozosta(cid:239)ych. Funkcje i klasy mog(cid:200) mie(cid:202) swoje w(cid:239)asne zasi(cid:218)gi. W przypadku Lessa swoje w(cid:239)asne zasi(cid:218)gi maj(cid:200) wstawki, które opisa(cid:239)em pod koniec tego rozdzia(cid:239)u. Poni(cid:285)szy przyk(cid:239)ad pokazuje, (cid:285)e zgodnie z deklaracj(cid:200) umieszczon(cid:200) w zasi(cid:218)gu wstawki w(cid:239)a(cid:258)ci- wo(cid:258)ci property zostanie przypisana warto(cid:258)(cid:202) 3: @value: 1; .mixin(){ @value: 3; property: @value; } .class{ 71 Poleć książkęKup książkę Less. Podstawy programowania .mixin; } @value: 2; Ten kod Less zostanie skompilowany do poni(cid:285)szego kodu CSS: .class{ property: 3; } Powy(cid:285)szy kod pokazuje, (cid:285)e nie mo(cid:285)na zmienia(cid:202) warto(cid:258)ci zmiennej w trakcie kompilacji. To w(cid:239)a- (cid:258)nie ten fakt sprawia, (cid:285)e zmienne teoretycznie mo(cid:285)na uzna(cid:202) za sta(cid:239)e. Mo(cid:285)na je porówna(cid:202) z umieszczon(cid:200) w kodzie definicj(cid:200) liczby PI, która zawsze jest taka sama. Taka warto(cid:258)(cid:202) zosta(cid:239)aby zadeklarowana tylko raz, jako PI = 3.14, i nie zmienia(cid:239)aby si(cid:218) w ca(cid:239)ym kodzie programu. Dlatego w kodzie Lessa, je(cid:258)li zmienne maj(cid:200) by(cid:202) u(cid:285)ywane jako sta(cid:239)e, nale(cid:285)y je deklarowa(cid:202) tylko jeden raz. Powtarzane deklaracje zmiennych oraz zasada, (cid:285)e wygrywa ostatnia z deklaracji, b(cid:218)d(cid:200) u(cid:285)ywane w wielu projektach Lessa jako mechanizm dostosowywania. W ramach prezentacji efektów ponownego zadeklarowania zmiennej utwórzmy nowy plik, less/customized.html, o nast(cid:218)puj(cid:200)cej zawarto(cid:258)ci: @import styles.less ; @dark-color: black; @basic-width: 940px; Potem odwo(cid:239)ajmy si(cid:218) do niego w dokumencie customized.html, u(cid:285)ywaj(cid:200)c znacznika link o nast(cid:218)- puj(cid:200)cej postaci: link rel= stylesheet/less type= text/css href= less/customized.less / Kiedy teraz wy(cid:258)wietlimy stron(cid:218) customized.html w przegl(cid:200)darce, przekonamy si(cid:218), (cid:285)e uda(cid:239)o si(cid:218) nam stworzy(cid:202) zmodyfikowan(cid:200) wersj(cid:218) uk(cid:239)adu za pomoc(cid:200) jedynie trzech wierszy kodu! Deklaracje zmiennych nie s(cid:200) statyczne! Cho(cid:202) zmienne dzia(cid:239)aj(cid:200) jak gdyby by(cid:239)y sta(cid:239)ymi, nie oznacza to wcale, (cid:285)e ich deklaracje s(cid:200) nie- zmienne lub statyczne. Przede wszystkim jednej zmiennej mo(cid:285)na przypisa(cid:202) warto(cid:258)(cid:202) innej. Takie rozwi(cid:200)zanie przedstawia poni(cid:285)szy fragment kodu: @var2 : 1; @var1 : @var2; @var2 : 3; W efekcie zmienna @var1 przyjmie warto(cid:258)(cid:202) 3, a nie 1. Tworzenie odwo(cid:239)ania w formie regu(cid:239)y nie jest tu wcale konieczne, gdy(cid:285) i tak stosowana jest zasada, (cid:285)e ostatnia deklaracja wygrywa. Zatem zmienna @var1 przyjmie warto(cid:258)(cid:202) zmiennej @var2 z jej ostatniej deklaracji. 72 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Stosowanie zmiennych i wstawek W przyk(cid:239)adowym kodzie mo(cid:285)na tak(cid:285)e zauwa(cid:285)y(cid:202) deklaracj(cid:218) @light-color: lighten(@dark-co (cid:180)lor,40 );. Funkcja lighter() to tak zwana wbudowana funkcja Lessa (wbudowane funkcje Lessa omówi(cid:218) dok(cid:239)adniej w rozdziale 3., „Regu(cid:239)y zagnie(cid:285)d(cid:285)one, dzia(cid:239)ania oraz funkcje wbu- dowane”). Wywo(cid:239)anie funkcji ligther() sprawia, (cid:285)e zmiennej @light-color zostaje przypisana warto(cid:258)(cid:202) koloru wyznaczona na podstawie warto(cid:258)ci zmiennej @dark-color. Warto tak(cid:285)e zwróci(cid:202) uwag(cid:218) na ostatni(cid:200) deklaracj(cid:218) zmiennej @dark-color, gdy(cid:285) podczas wyznaczania koloru zostanie u(cid:285)yta warto(cid:258)(cid:202) podana w(cid:239)a(cid:258)nie w niej. Dynamiczne deklaracje zmiennych zapewniaj(cid:200) du(cid:285)(cid:200) elastyczno(cid:258)(cid:202), trzeba jednak pami(cid:218)ta(cid:202) o tym, (cid:285)e warto(cid:258)(cid:202) nale(cid:285)y zadeklarowa(cid:202) tylko raz, a po tej deklaracji nie mo(cid:285)na ju(cid:285) jej zmienia(cid:202). Leniwe wczytywanie Zanim zako(cid:241)cz(cid:218) omawianie zmiennych i przejd(cid:218) do wstawek, wspomn(cid:218) jeszcze o leniwym wczytywaniu (ang. lazy loading). W kontek(cid:258)cie j(cid:218)zyków programowania termin ten oznacza opó(cid:283)nienie inicjalizacji obiektu a(cid:285) do momentu, gdy stanie si(cid:218) on potrzebny. Leniwe wczyty- wanie jest przeciwie(cid:241)stwem aktywnego wczytywania. Less stosuje leniwe wczytywanie, co oznacza, (cid:285)e zmiennych nie trzeba deklarowa(cid:202), dopóki nie b(cid:218)d(cid:218) potrzebne. Zrozumienie teoretycznych aspektów tego zagadnienia jest wa(cid:285)ne, ale teraz skupmy si(cid:218) na tym, jak leniwe wczytywanie dzia(cid:239)a w praktyce. W tym celu przeanalizujmy nast(cid:218)puj(cid:200)cy przyk(cid:239)ad: .class { property: @var; } @var: 2; Ten kod Lessa zostanie skompilowany do nast(cid:218)puj(cid:200)cego kodu CSS: .class { property: 2; } Interpolacja zmiennych W kodzie Lessa zmiennych mo(cid:285)na u(cid:285)ywa(cid:202) w nazwach selektorów, nazwach w(cid:239)a(cid:258)ciwo(cid:258)ci, adre- sach URL, a nawet w dyrektywach importu. Kompilator zast(cid:200)pi odwo(cid:239)anie do zmiennej, zast(cid:218)- puj(cid:200)c je warto(cid:258)ci(cid:200) zmiennej zapisanej w formie (cid:239)a(cid:241)cucha znaków. Aby unikn(cid:200)(cid:202) ewentualnych niejednoznaczno(cid:258)ci, nazwy zmiennych mo(cid:285)na zapisywa(cid:202) w nawia- sach klamrowych. Na przyk(cid:239)ad poni(cid:285)szy fragment kodu Lessa: 73 Poleć książkęKup książkę Less. Podstawy programowania @var: less; .@{var} { property: ~ @{var}-5 ; } zostanie skompilowany do nast(cid:218)puj(cid:200)cego kodu CSS: .less { property: less-5; } Pocz(cid:200)wszy od wersji 1.6 Lessa, dok(cid:239)adnie w taki sam sposób mo(cid:285)na stosowa(cid:202) zmienne w nazwach w(cid:239)a(cid:258)ciwo(cid:258)ci. Na przyk(cid:239)ad poni(cid:285)szy fragment kodu Lessa: @property: width; .fixed { @{property}: 100 ; max-@{property}: 500px; } zostanie skompilowany do nast(cid:218)puj(cid:200)cego kodu CSS: .fixed { width: 100 ; max-width: 500px; } W niektórych przypadkach warto(cid:258)ci b(cid:218)d(cid:200) musia(cid:239)y by(cid:202) zapisane w cudzys(cid:239)owach (regu(cid:239)y stoso- wania warto(cid:258)ci w takich sytuacjach opisa(cid:239)em w nast(cid:218)pnym punkcie rozdzia(cid:239)u). Mechanizmu interpolacji zmiennych mo(cid:285)na tak(cid:285)e u(cid:285)y(cid:202) do stworzenia zmiennych zmiennych, których przy- k(cid:239)ad przedstawia poni(cid:285)szy fragment kodu: @variable: red; @color: variable ; p { color: @@color; } Powy(cid:285)szy kod zostanie skompilowany do kodu CSS o nast(cid:218)puj(cid:200)cej postaci: p { color: red; } Taki sposób odwo(cid:239)ywania si(cid:218) do zmiennych mo(cid:285)e mie(cid:202) tylko jeden poziom zagnie(cid:285)d(cid:285)enia, co oznacza, (cid:285)e nie mo(cid:285)na u(cid:285)y(cid:202) kodu o postaci @@@variable. 74 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Stosowanie zmiennych i wstawek Zapisywanie warto(cid:258)ci Less jest rozszerzeniem j(cid:218)zyka CSS. Oznacza to, (cid:285)e w przypadku próby skompilowania kodu CSS nieprawid(cid:239)owego lub zapisanego w niestandardowy sposób, którego kompilator nie jest w stanie rozpozna(cid:202), Less wy(cid:258)wietli komunikat o b(cid:239)(cid:218)dzie. Trzeba przy tym pami(cid:218)ta(cid:202), (cid:285)e Less sprawdza jedynie sk(cid:239)adni(cid:218), nie dbaj(cid:200)c o to, czy przypisywane warto(cid:258)ci maj(cid:200) sens. W poni(cid:285)szym przyk(cid:239)adzie w(cid:239)a(cid:258)ciwo(cid:258)ci width jest przypisywana warto(cid:258)(cid:202) reprezentuj(cid:200)ca kolor: p { width: darkblue; } Sk(cid:239)adnia CSS przewiduje natomiast, (cid:285)e w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) width mo(cid:285)e przyjmowa(cid:202) warto(cid:258)ci auto, initial, inherit oraz warto(cid:258)(cid:202) liczbow(cid:200) z okre(cid:258)leniem jednostki typu px, cm, em itd. b(cid:200)d(cid:283) te(cid:285) warto(cid:258)(cid:202) procentow(cid:200). Niektóre przegl(cid:200)darki definiuj(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci, u(cid:285)ywaj(cid:200)c przy tym nieprawid(cid:239)owego kodu CSS. Najbardziej znanym przyk(cid:239)adem takiego dzia(cid:239)ania jest kod o przyk(cid:239)adowej postaci property: ms:somefunction(). Niektóre z takich regu(cid:239) mo(cid:285)na zast(cid:218)powa(cid:202) regu(cid:239)ami charakterystycznymi dla konkretnych przegl(cid:200)darek. Nale(cid:285)y jednak zwróci(cid:202) uwag(cid:218), (cid:285)e nieprawid(cid:239)owe warto(cid:258)ci w(cid:239)a- (cid:258)ciwo(cid:258)ci nie zostan(cid:200) skompilowane przez Lessa. Aby w skompilowanym kodzie CSS uzyska(cid:202) regu(cid:239)(cid:218) o postaci property: ms:somefunction(), nale(cid:285)a(cid:239)oby u(cid:285)y(cid:202) nast(cid:218)puj(cid:200)cego kodu Lessa: selector { property: ~ ms:somefunction() ; } Taki kod zostanie skompilowany bez (cid:285)adnych problemów i wygeneruje nast(cid:218)puj(cid:200)cy kod CSS: selector { property: ms:somefunction(); } Kod ~ ms:somefunction() korzysta ze specjalnego sposobu zapisu, który opisz(cid:218) dok(cid:239)adniej w dalszej cz(cid:218)(cid:258)ci rozdzia(cid:239)u. Nowa funkcja, calc(), wprowadzona w CSS3, jest rdzennym sposobem CSS umo(cid:285)liwiaj(cid:200)cym wykonywanie prostych oblicze(cid:241) arytmetycznych i stanowi(cid:200)cym zamiennik warto(cid:258)ci o dowolnej d(cid:239)ugo(cid:258)ci. W poni(cid:285)szym przyk(cid:239)adzie, zarówno w przypadku kompilacji, jak i importowania, Less nie zwróci prawid(cid:239)owej warto(cid:258)ci: @aside-width: 80px; .content { width: calc(100 - @aside-width) } 75 Poleć książkęKup książkę Less. Podstawy programowania Powy(cid:285)szy kod Lessa zostanie skompilowany na nast(cid:218)puj(cid:200)cy kod CSS: .content { width: calc(20 ); } W powy(cid:285)szym kodzie Lessa @aside-width: 80px jest deklaracj(cid:200) zmiennej o nazwie aside-width. Warto(cid:258)(cid:202) tej zmiennej to 80 pikseli (80px). Wi(cid:218)cej informacji o zmiennych mo(cid:285)na znale(cid:283)(cid:202) w kolejnych akapitach. Najwa(cid:285)niejsze jest jednak to, (cid:285)e wynik przetwarzania powy(cid:285)szego kodu Lessa jest nieprawid(cid:239)owy (albo co najmniej niezgodny z oczekiwaniami), gdy(cid:285) funkcja calc() powinna zosta(cid:202) wywo(cid:239)ana w czasie wy(cid:258)wietlania strony. W takim przypadku funkcja ta dysponuje mo(cid:285)liwo(cid:258)ci(cid:200) mieszania jednostek, takich jak warto(cid:258)ci procentowe i liczby pikseli. Jednak w powy(cid:285)- szym przyk(cid:239)adzie w(cid:239)a(cid:258)ciwo(cid:258)ci width w selektorze .content przypisywane jest 100 dost(cid:218)pnej sze- roko(cid:258)ci (czyli ca(cid:239)a dost(cid:218)pna szeroko(cid:258)(cid:202)) pomniejszone o 80px (warto(cid:258)(cid:202) wyra(cid:285)aj(cid:200)c(cid:200) liczb(cid:218) pikseli). Problem ten mo(cid:285)na rozwi(cid:200)za(cid:202), stosuj(cid:200)c przedstawiony wcze(cid:258)niej, specjalny sposób zapisu. W przypadku Lessa, aby (cid:239)a(cid:241)cuch znaków nie zosta(cid:239) przetworzony, nale(cid:285)y go zapisa(cid:202) w cudzy- s(cid:239)owie ( ) poprzedzonym tyld(cid:200) (~). A zatem w powy(cid:285)szym przyk(cid:239)adzie wywo(cid:239)anie funkcji calc() nale(cid:285)a(cid:239)oby zapisa(cid:202) jako ~ calc(100 - @{aside-width}) . Koniecznie nale(cid:285)y zwróci(cid:202) uwag(cid:218), (cid:285)e nazwa zmiennej aside-width zosta(cid:239)a zapisana w nawia- sach klamrowych — jest to przyk(cid:239)ad opisywanej w poprzednim punkcie rozdzia(cid:239)u interpolacji zmiennych. Jednak w przypadku opisywanego tu sposobu zapisu zmiennych, okre(cid:258)lanego w j(cid:218)zyku angielskim terminem escaping, wszystko, co zosta(cid:239)o zapisane w nawiasach, zostanie u(cid:285)yte tak, jak zosta(cid:239)o zapisane, niemal bez zmian. Jedynym wyj(cid:200)tkiem od tej zasady jest inter- polacja zmiennych. (cid:146)a(cid:241)cuchy s(cid:200) sekwencjami znaków. W kodzie Lessa i CSS za (cid:239)a(cid:241)cuchy uznaje si(cid:218) warto(cid:258)ci zapi- sywane mi(cid:218)dzy znakami cudzys(cid:239)owu. Bez opisywanego tu sposobu zapisu Less kompiluje wszystkie (cid:239)a(cid:241)cuchy umieszczone w kodzie do postaci (cid:239)a(cid:241)cuchów CSS. Na przyk(cid:239)ad w kodzie CSS w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) o postaci width: calc(100 - 80px) nie ma wi(cid:218)kszego sensu, podobnie zreszt(cid:200) jak w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) width: calc(100 - @aside-width), gdy(cid:285) wyra(cid:285)enie @aside-width nie ma (cid:285)adnego znaczenia. A zatem, korzystaj(cid:200)c z opisywanego tu sposobu zapisu i z interpolacji zmiennych, mo(cid:285)na u(cid:285)y(cid:202) nast(cid:218)puj(cid:200)cego kodu Lessa: @aside-width: 80px; .content{ width: ~ calc(100 - @{aside-width}); } Zostanie on skompilowany do nast(cid:218)puj(cid:200)cego kodu CSS: .content { width: calc(100 - 80px); } 76 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Stosowanie zmiennych i wstawek Wskazówka W konkretnym przypadku stosowania funkcji calc() kompilator Lessa udost(cid:218)pnia opcj(cid:218) strict-math (pocz(cid:200)wszy od wersji 1.4). Jest ona u(cid:285)ywana w postaci -strict-math=on, gdy kompilator uruchamiany jest z poziomu wiersza polece(cid:241), b(cid:200)d(cid:283) jako strictMath: true w przypadku stosowania kompilacji po stronie klienta. Kiedy opcja strictMath jest w(cid:239)(cid:200)czona, wywo(cid:239)anie o postaci calc(100 - @aside- (cid:180)width) zostanie skompilowane do postaci kodu calc(100 - 80px);. Trzeba przy tym pami(cid:218)ta(cid:202), (cid:285)e podczas prac nad kolejnymi wersjami kompilatora Lessa — 1.6, 1.7 oraz 2.0 — wprowadzono wiele zmian w sposobie dzia(cid:239)ania tej opcji. Stosowanie wstawek Wstawki odgrywaj(cid:200) bardzo wa(cid:285)n(cid:200) rol(cid:218) podczas stosowania Lessa. Przedstawi(cid:239)em je ju(cid:285) w poprzed- nim rozdziale, na przyk(cid:239)adzie wstawki dodaj(cid:200)cej do wybranego elementu obramowanie i zaokr(cid:200)- glone wierzcho(cid:239)ki. Konwencje u(cid:285)ywane do okre(cid:258)lania nazw wstawek pochodz(cid:200) z programowania obiektowego. Wstawki wygl(cid:200)daj(cid:200) jak funkcje znane z funkcyjnych j(cid:218)zyków programowania, lecz w rzeczywisto(cid:258)ci dzia(cid:239)aj(cid:200) jak makra j(cid:218)zyka C. Umo(cid:285)liwiaj(cid:200) one dodanie do wybranej klasy wszystkich w(cid:239)a(cid:258)ciwo(cid:258)ci innej klasy poprzez dodanie jej nazwy jako jednej z w(cid:239)a(cid:258)ciwo(cid:258)ci klasy, której posta(cid:202) nale(cid:285)y okre(cid:258)li(cid:202). Poni(cid:285)szy kod przedstawia przyk(cid:239)ad wstawki i jej zastosowania: .mixin(){ color: red; width: 300px; padding: 0 5px 10px 5px; } p{ .mixin(); } A oto posta(cid:202) wynikowego kodu CSS uzyskanego po kompilacji tego przyk(cid:239)adu: p{ color: red; width: 300px; padding: 0 5px 10px 5px; } Ten wynikowy kod CSS zastosowany w witrynie sprawi, (cid:285)e wszystkie znaczniki p b(cid:218)d(cid:200) mia(cid:239)y posta(cid:202) okre(cid:258)lon(cid:200) przez w(cid:239)a(cid:258)ciwo(cid:258)ci zdefiniowane przez wstawk(cid:218) mixin(). Zalet(cid:200) jest to, (cid:285)e t(cid:218) sam(cid:200) wstawk(cid:218) b(cid:218)dzie mo(cid:285)na zastosowa(cid:202) w wielu ró(cid:285)nych klasach. Jak mo(cid:285)na si(cid:218) by(cid:239)o przeko- na(cid:202) na przyk(cid:239)adzie przedstawionym w rozdziale 1., takie w(cid:239)a(cid:258)ciwo(cid:258)ci wystarczy zadeklarowa(cid:202) tylko jeden raz. Spróbujmy teraz otworzy(cid:202) plik less/mixin.less dost(cid:218)pny w przyk(cid:239)adach do(cid:239)(cid:200)czonych do ksi(cid:200)(cid:285)ki, w katalogu rodzial_02. W przyk(cid:239)adach stosowanych w tej ksi(cid:200)(cid:285)ce wszystkie wstawki s(cid:200) umieszczane 77 Poleć książkęKup książkę Less. Podstawy programowania w jednym pliku. Wewn(cid:200)trz tego pliku poszczególne wstawki mo(cid:285)na uporz(cid:200)dkowa(cid:202) w zale(cid:285)no- (cid:258)ci od ich funkcji. Takie rozwi(cid:200)zanie, polegaj(cid:200)ce na zapisywaniu wstawek w jednym pliku, ma t(cid:218) zalet(cid:218), (cid:285)e mo(cid:285)e nas uchroni(cid:202) przed uszkodzeniem kodu podczas usuwania lub modyfiko- wania innych plików Lessa. W przyk(cid:239)adach do tego rozdzia(cid:239)u znajduj(cid:200) si(cid:218) dwa pliki Lessa, less/header.less oraz less/footer.less, których wstawka border-radius jest u(cid:285)ywana. Nie chcie- liby(cid:258)my, aby w razie wprowadzania zmian w zawarto(cid:258)ci pliku header.less pojawi(cid:239)y si(cid:218) jakie(cid:258) problemy w kodzie drugiego pliku. Oczywi(cid:258)cie nie chcieliby(cid:258)my tak(cid:285)e doprowadzi(cid:202) do sytuacji, w której kod wstawki powtarza(cid:239)by si(cid:218) w kilku ró(cid:285)nych plikach. Wstawka box-sizing zadeklarowana w pliku less/boxsizing.less zostanie opisana jako przypadek szczególny. Ma ona bowiem wp(cid:239)yw na wszystkie elementy i pozwala globalnie zmieni(cid:202) ustawie- nie w(cid:239)a(cid:258)ciwo(cid:258)ci box-sizing. Plik less/mixins.less zawiera cztery wstawki, które omówi(cid:218) w kolejnych punktach rozdzia(cid:239)u. Dwie spo(cid:258)ród tych wstawek, a mianowicie box-shadow i clearfix, maj(cid:200) bardzie z(cid:239)o(cid:285)on(cid:200) struk- tur(cid:218), korzystaj(cid:200)c(cid:200), na przyk(cid:239)ad, z zagnie(cid:285)d(cid:285)ania, ale akurat te dwie wstawki opisz(cid:218) szczegó(cid:239)owo w nast(cid:218)pnym rozdziale. Proste wstawki W poprzednim rozdziale przedstawi(cid:239)em kilka przyk(cid:239)adów prostych wstawek, takich jak bordered lub roundedcornersmixin. Prosta wstawka wygl(cid:200)da tak samo jak zwyczajna definicja klasy CSS. Wstawki s(cid:200) wywo(cid:239)ywane w klasach i dodaj(cid:200) do tych klas swoje w(cid:239)a(cid:258)ciwo(cid:258)ci. W pliku less/mixins.less dost(cid:218)pnym w przyk(cid:239)adach do(cid:239)(cid:200)czonych do ksi(cid:200)(cid:285)ki zdefiniowana zosta(cid:239)a wstawka .center-content, która przypisuje w(cid:239)a(cid:258)ciwo(cid:258)ci margin warto(cid:258)(cid:202) 0 auto. Ta wstawka jest u(cid:285)ywana do wy(cid:258)rodkowania nag(cid:239)ówka uk(cid:239)adu, pojemnika na tre(cid:258)(cid:202) strony oraz stopki. Wskazówka Warto zwróci(cid:202) uwag(cid:218), (cid:285)e przedstawiona tu wstawka center-content nie jest jedynym rozwi(cid:200)zaniem zapewniaj(cid:200)cym efekt wy(cid:258)rodkowania. W przypadku u(cid:285)ywanego tu przyk(cid:239)adowego uk(cid:239)adu strony taki sam efekt mo(cid:285)na uzyska(cid:202), umieszczaj(cid:200)c nag(cid:239)ówek, tre(cid:258)(cid:202) oraz stopk(cid:218) w jakim(cid:258) nadrz(cid:218)dnym, wy(cid:258)rodkowanym pojemniku. Mo(cid:285)na si(cid:218) tak(cid:285)e zastanawia(cid:202) nad nazw(cid:200) tej wstawki. Gdyby(cid:258)my si(cid:218) bowiem zdecydowali, (cid:285)eby nie wy(cid:258)rodkowywa(cid:202) tre(cid:258)ci strony, to taka nazwa wstawki przesta(cid:239)aby mie(cid:202) sens. Spróbujmy teraz usun(cid:200)(cid:202) ze wstawki w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) margin: 0 auto, odpowiadaj(cid:200)c(cid:200) za wy(cid:258)rodko- wanie tre(cid:258)ci. Efekty tej modyfikacji b(cid:218)dzie mo(cid:285)na zobaczy(cid:202) po od(cid:258)wie(cid:285)eniu strony wy(cid:258)wie- tlonej w przegl(cid:200)darce. 78 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Stosowanie zmiennych i wstawek Wstawki z parametrami Wspomnia(cid:239)em wcze(cid:258)niej, (cid:285)e wstawki dzia(cid:239)aj(cid:200) jak funkcje stosowane w funkcyjnych j(cid:218)zykach pro- gramowania. Oznacza to, (cid:285)e wstawki, podobnie jak funkcje, mog(cid:200) mie(cid:202) parametry. Parametr to warto(cid:258)(cid:202) zastosowana w po(cid:239)(cid:200)czeniu ze wstawk(cid:200), a nazwa parametru jest u(cid:285)ywana w kodzie wstawki do odwo(cid:239)ywania si(cid:218) do jego warto(cid:258)ci. Poni(cid:285)szy kod przedstawia przyk(cid:239)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(cid:218)puj(cid:200)cej postaci: .class1 { property: 10; } .class2 { property: 20; } Ten przyk(cid:239)ad wyra(cid:283)nie pokazuje, (cid:285)e dzi(cid:218)ki parametryzacji wstawki s(cid:200) narz(cid:218)dziem o ogromnych mo(cid:285)liwo(cid:258)ciach. Mo(cid:285)na ich bowiem wielokrotnie u(cid:285)ywa(cid:202), by okre(cid:258)la(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci zale(cid:285)ne od warto(cid:258)ci parametrów. Warto(cid:258)ci domy(cid:258)lne Parametry mog(cid:200) mie(cid:202) opcjonalne warto(cid:258)ci domy(cid:258)lne, definiowane nast(cid:218)puj(cid:200)co: .mixin(@pa (cid:180)rameter:defaultvalue);. Sposób dzia(cid:239)ania tych domy(cid:258)lnych warto(cid:258)ci parametrów mo(cid:285)na przeanalizowa(cid:202) na przyk(cid:239)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(cid:202) uwag(cid:218), (cid:285)e domy(cid:258)ln(cid:200) warto(cid:258)ci(cid:200) parametru @radius jest 10px. Je(cid:258)li powy(cid:285)sza wstawka zostanie wywo(cid:239)ana bez okre(cid:258)lania warto(cid:258)ci parametru, to zostanie zastosowana warto(cid:258)(cid:202) domy(cid:258)lna. Przeanalizujmy ten oto przyk(cid:239)ad kodu Lessa: div { border-radius(); // bez argumentów .small { 79 Poleć książkęKup książkę Less. Podstawy programowania border-radius(5px); } } Powy(cid:285)szy kod Lessa zostanie skompilowany do kodu CSS o nast(cid:218)puj(cid:200)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(cid:285)szym kodzie warto zwróci(cid:202) uwag(cid:218) na klas(cid:218) .small, która zosta(cid:239)a zagnie(cid:285)d(cid:285)ona wewn(cid:200)trz selektora div. Kod u(cid:285)ywa tak(cid:285)e znaku , by odwo(cid:239)a(cid:202) si(cid:218) do selektora nadrz(cid:218)dnego. Wi(cid:218)cej infor- macji na temat zagnie(cid:285)d(cid:285)ania selektorów i zastosowania znaku mo(cid:285)na znale(cid:283)(cid:202) w rozdziale 3., „Regu(cid:239)y zagnie(cid:285)d(cid:285)one, dzia(cid:239)ania oraz funkcje wbudowane”. Konwencje nazewnicze i sposoby wywo(cid:239)ywania wstawek W niniejszej ksi(cid:200)(cid:285)ce wstawki maj(cid:200) znacz(cid:200)ce, opisowe nazwy, które, podobnie jak nazwy zmien- nych, s(cid:200) zapisywane z wykorzystaniem znaku minusa. Stosowanie znacz(cid:200)cych i opisowych nazw upraszcza utrzymanie kodu i u(cid:239)atwia innym osobom jego zrozumienie. Nazwy parametrów i zmiennych zaczynaj(cid:200) si(cid:218) od znaku @. Zazwyczaj na podstawie kontekstu bez trudu b(cid:218)dzie mo(cid:285)na okre(cid:258)li(cid:202), czy chodzi o zmienn(cid:200) czy o parametr wstawki. Aby lepiej zrozumie(cid:202) parametry i zmienne, przeanalizujmy nast(cid:218)puj(cid:200)cy przyk(cid:239)ad: @defaulvalue-parameter1 :10; .mixin(@parameter1: @defaulvalue-parameter1) { property: @parameter1; } .class { .mixin } Powy(cid:285)szy kod zostanie skompilowany do nast(cid:218)puj(cid:200)cej postaci: .class{ property: 10; } 80 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Stosowanie zmiennych i wstawek W przyk(cid:239)adzie tym nale(cid:285)y zwróci(cid:202) uwag(cid:218) na to, (cid:285)e @defaultvalue-parameter1 jest zmienn(cid:200). Kolejny przyk(cid:239)ad demonstruje zagadnienie zasi(cid:218)gu we wstawkach: @defaulvalue-parameter1 :10; .mixin(@parameter1: @defaulvalue-parameter1){ property: @parameter1; } .class { .mixin } @parameter1 : 20; Powy(cid:285)szy kod Lessa zostanie skompilowany do kodu CSS o nast(cid:218)puj(cid:200)cej postaci: .class{ property: 10; } W tym przyk(cid:239)adzie ostatnia deklaracja @parameter1 jest umieszczona poza wstawk(cid:200), przez co warto(cid:258)(cid:202) b(cid:218)dzie wynosi(cid:202) 10. Stosowanie wstawek z wi(cid:218)ksz(cid:200) liczb(cid:200) parametrów Wstawki mog(cid:200) mie(cid:202) wi(cid:218)cej ni(cid:285) jeden parametr, przy czym wówczas nazwy poszczególnych parametrów musz(cid:200) by(cid:202) od siebie oddzielone znakiem przecinka. Tak(cid:285)e w wielu innych, funk- cyjnych j(cid:218)zykach programowania przecinek jest cz(cid:218)sto stosowany jako znak separatora para- metrów. Przecinki s(cid:200) jednak w tym kontek(cid:258)cie nieco niejednoznaczne, gdy(cid:285) nie tylko s(cid:239)u(cid:285)(cid:200) do oddzielania parametrów, lecz równie(cid:285) s(cid:200) stosowane do separacji elementów list zapisanych w formacie cvs (ang. comma-separated values — warto(cid:258)ci rozdzielone przecinkami). Wstawka .mixin(a,b,c,d) b(cid:218)dzie wywo(cid:239)ywana z czterema parametrami. Dok(cid:239)adnie tak samo b(cid:218)dzie wywo(cid:239)ywana wstawka .mixin(a;b;c;d). A teraz przeanalizujmy przyk(cid:239)ad wywo(cid:239)ania wstawki, które b(cid:218)dzie mia(cid:239)o nast(cid:218)puj(cid:200)c(cid:200) posta(cid:202): .mixin(a,b,c;d). W tym przypadku wstawka ma tylko dwa parametry, z których pierwszy jest list(cid:200) sk(cid:239)adaj(cid:200)c(cid:200) si(cid:218) z trzech elementów. Je(cid:258)li w li(cid:258)cie parametrów wstawki zostanie odnaleziony cho(cid:202)by jeden znak (cid:258)rednika, to tylko znaki (cid:258)rednika b(cid:218)d(cid:200) uznawane za separatory parametrów. Poni(cid:285)szy przyk(cid:239)ad przedstawia efekt, jaki wywo(cid:239)a zastosowanie w li(cid:258)cie parametrów dodatkowego (cid:258)rednika: .mixin(@list){ property: @list; } .class{ .mixin(a,b,c,d;);} // uwaga na dodatkowy znak (cid:258)rednika! Ten kod Lessa zostanie skompilowany do kodu CSS o nast(cid:218)puj(cid:200)cej postaci: .class{ property: a, b, c, d; } 81 Poleć książkęKup książkę Less. Podstawy programowania Bez tego znaku (cid:258)rednika na ko(cid:241)cu wstawka zosta(cid:239)aby wywo(cid:239)ana z czterema parametrami. W takim przypadku kompilator Lessa wy(cid:258)wietli(cid:239)by b(cid:239)(cid:200)d RuntimeError: No matching definition found for .mixin(a, b, c, d)1, oczekiwa(cid:239)by bowiem znalezienia wstawki zadeklarowanej w nast(cid:218)puj(cid:200)cy sposób: .mixin(@a, @b, @c, @d). Kolejny przyk(cid:239)ad przedstawia „przeci(cid:200)(cid:285)anie” wstawek — sytuacj(cid:218), w której kompilator skom- piluje t(cid:218) wstawk(cid:218), która pasuje do wywo(cid:239)ania: .mixin(@color; @width) { border: 1px solid @color; width: 50px; } .mixin(@color;) { color: green; } p { .onlycolor { .mixin(green); } .including-border { .mixin(green;500px); } } Powy(cid:285)szy kod Lessa zostanie skompilowany do kodu CSS o nast(cid:218)puj(cid:200)cej postaci: p.onlycolor { color: green; } p.including-border { border: 1px solid green; width: 50px; } Powy(cid:285)szy przyk(cid:239)ad wyra(cid:283)nie pokazuje, (cid:285)e Less pozwala na tworzenie wstawek o tej samej nazwie. W przypadku odnalezienia wstawek o identycznych nazwach kompilator Lessa u(cid:285)yje wstawki o odpowiedniej liczbie parametrów b(cid:200)d(cid:283) te(cid:285), je(cid:258)li (cid:285)adna wstawka pasuj(cid:200)ca do wywo(cid:239)ania nie zostanie odnaleziona, zg(cid:239)osi b(cid:239)(cid:200)d. Takie dobieranie wstawek na podstawie liczby parametrów mo(cid:285)na by porówna(cid:202) z przeci(cid:200)(cid:285)aniem metod — rozwi(cid:200)zaniem stosowanym w wielu j(cid:218)zykach programowania. Je(cid:258)li wywo(cid:239)anie pasuje do kilku wstawek, jak w poni(cid:285)szym przyk(cid:239)adzie, to kompilator u(cid:285)yje wszystkich pasuj(cid:200)cych wstawek: .mixin(@a){ property-a: @a; } 1 Nie znaleziono definicji pasuj(cid:200)cej do .mixin(a, b, c, d) — przyp. t(cid:239)um. 82 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Stosowanie zmiennych i wstawek .mixin(@b){ property-b: @b; } class{ .mixin(value); } Ten kod Lessa zostanie skompilowany do nast(cid:218)puj(cid:200)cego kodu CSS: class { property-a: value; property-b: value; } Z(cid:239)o(cid:285)ona wstawka generuj(cid:200)ca liniowy gradient t(cid:239)a Dysponujesz ju(cid:285) wystarczaj(cid:200)c(cid:200) wiedz(cid:200) teoretyczn(cid:200), by móc tworzy(cid:202) bardziej z(cid:239)o(cid:285)one wstawki. W kolejnym przyk(cid:239)adzie do trzech elementów umieszczonych w stopce strony dodamy t(cid:239)a o postaci gradientu liniowego sk(cid:239)adaj(cid:200)cego si(cid:218) z trzech kolorów, generowane przez odpowiednio spara- metryzowan(cid:200) wstawk(cid:218). Finaln(cid:200) posta(cid:202) elementów stopki przedstawia rysunek 2.2. Rysunek 2.2. Gradienty liniowe w tle elementów dodane przy u(cid:285)yciu wstawki Lessa Te gradienty zosta(cid:239)y wybrane celowo — ze wzgl(cid:218)du na swoj(cid:200) z(cid:239)o(cid:285)ono(cid:258)(cid:202) i dobrze opisane zmiany, jakim podlega(cid:239)y. W efekcie napiszemy z(cid:239)o(cid:285)on(cid:200) wstawk(cid:218), która bez w(cid:200)tpienia nie jest doskona(cid:239)a, lecz z pewno(cid:258)ci(cid:200) znacz(cid:200)co poprawi posta(cid:202) wy(cid:258)wietlanych elementów. Mo(cid:285)na mie(cid:202) jednak pewno(cid:258)(cid:202), (cid:285)e t(cid:218) wstawk(cid:218) trzeba b(cid:218)dzie od czasu do czasu poprawia(cid:202), ze wzgl(cid:218)du na zaprze- stawanie obs(cid:239)ugi starszych przegl(cid:200)darek, pojawianie si(cid:218) nowych, zmiany w specyfikacji oraz nowe informacje o gradientach. Dodatkowe przyk(cid:239)ady zastosowania gradientów mo(cid:285)na znale(cid:283)(cid:202) na stronie https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients. Tych koniecznych zmian nie sposób unikn(cid:200)(cid:202), mo(cid:285)na jednak zminimalizowa(cid:202) czas niezb(cid:218)dny do zapewnienia aktualizacji u(cid:285)ywanych wstawek. Less gwarantuje, (cid:285)e wszystkie gradienty t(cid:239)a b(cid:218)d(cid:200) tworzone na podstawie tej samej wstawki, zdefiniowanej w jednym miejscu. Najpro(cid:258)ciej rzecz ujmuj(cid:200)c, gradienty CSS s(cid:200) definiowane jako obrazy t(cid:239)a. Z tego powodu tworzy si(cid:218) je, korzystaj(cid:200)c z w(cid:239)a(cid:258)ciwo(cid:258)ci background-image. 83 Poleć książkęKup książkę Less. Podstawy programowania W tej ksi(cid:200)(cid:285)ce do okre(cid:258)lania gradientów b(cid:218)dzie u(cid:28
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Less. Podstawy programowania
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: