Responsive Web Design

Podobne dokumenty
Dokument hipertekstowy

Responsywne strony WWW

CSS - layout strony internetowej

RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub

Idea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot

RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Podstawy pozycjonowania CSS

Krok 1: Stylizowanie plakatu

Bezbolesny wstęp do CSS

Laboratorium 1: Szablon strony w HTML5

Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap.

LESS - CSS dla leniwych

Systemy internetowe HTML + CSS - dodatki

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Widoczność zmiennych Czy wartości każdej zmiennej można zmieniać w dowolnym miejscu kodu? Czy można zadeklarować dwie zmienne o takich samych nazwach?

Sass Rewolucja w CSS +

Masz pomysł na lepszy wygląd?

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: Wersja: 1.

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

PORADNIK KODOWANIA: CSS

1 Podstawy c++ w pigułce.

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

Dwie perspektywy responsive web design: user experience i front-end developer

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.

Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style="float: left">pierwsza treść, zdjęcie, tabele lub cokolwiek </div>

Przepis. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć stronę internetową ze swoim ulubionym przepisem. Zadania do wykonania

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści

2 Podstawy tworzenia stron internetowych

STRONY INTERNETOWE mgr inż. Adrian Zapała

Zrozumieć CSS. Co To Jest Styl?

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści


Wskaźniki a tablice Wskaźniki i tablice są ze sobą w języku C++ ściśle związane. Aby się o tym przekonać wykonajmy cwiczenie.

Układy witryn internetowych

ANIMACJE W CSS3. Czyli po co płacić podatek o Javy Script i JQuery

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Wykorzystano fragmenty wykładu Krystyny Dziubich GRAFIKA WEKTOROWA. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska.

Responsive Web Design

plansoft.org Zmiany w Plansoft.org

Aplikacje WWW - laboratorium

Znaczniki języka HTML

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...

Kaskadowe arkusze stylów (CSS)

Pozycjonowanie elementów

Elementy div i style CSS w praktyce

Spis treści. 1. Szerokość witryny WWW

Dziedziczenie. Dziedziczenie i kaskadowość. Dodał Administrator środa, 10 marzec :00. Tematy: Dziedziczenie Kaskadowość

Programowanie dla początkujących w 24 godziny / Greg Perry, Dean Miller. Gliwice, cop Spis treści

WYKŁAD 1 TECHNOLOGIE FRONT-END CZĘŚĆ 1

MAMP: Można to pobrać i zainstalować z XAMPP: Można go pobrać i zainstalować z

Krótki przegląd własności języka CSS

Tworzenie szablonów użytkownika

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

Dokumentacja WebMaster ver 1.0

Specyfikacja techniczna dot. mailingów HTML

Zbuduj robota. Wprowadzenie HTML & CSS. W tym projekcie nauczysz się, jak wstawiać obrazki, by stworzyć własnego robota! Zadania do wykonania

W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje:

za pomocą: definiujemy:

Przykład integracji kalkulatora mbank RATY na platformie IAI

TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

2. MATERIAŁ NAUCZANIA

1 Podstawy c++ w pigułce.

GRID LAYOUT. Waldemar Korłub. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska

Przygotowanie do nowoczesnego programowania po stronie przeglądarki. (HTML5, CSS3, JS, wzorce, architektura, narzędzia)

Zadanie utworzenie szablonu kalkulatora

Bootstrap w 24 godziny / Jennifer Kyrnin. Gliwice, cop Spis treści

I. Formatowanie tekstu i wygląd strony

Tell a Story. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć własną stronę internetową, by opowiedzieć historyjkę, dowcip albo wiersz.

Zastanawiałeś się może, dlaczego Twój współpracownik,

Witryny i aplikacje internetowe

Efektywne tworzenie aplikacji webowych z wykorzystaniem AngularJS, HTML5 i JavaScript

Przewodnik... Tworzenie Landing Page

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I

TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty

Niezwykłe tablice Poznane typy danych pozwalają przechowywać pojedyncze liczby. Dzięki tablicom zgromadzimy wiele wartości w jednym miejscu.

Z CSS3 szybciej i przyjemniej

Pokaz slajdów na stronie internetowej

Po uruchomieniu programu nasza litera zostanie wyświetlona na ekranie

FAQ. Dotyczące nowej bankowości mobilnej.

Pierwsza strona internetowa

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

I. Wstawianie rysunków

Sieciowe Technologie Mobilne. Laboratorium 4

1. Przypisy, indeks i spisy.

Tajemniczy List. Wstęp HTML & CSS

Przewodnik Szybki start

Szczegółowy opis zamówienia:

Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski

HTML (HyperText Markup Language) hipertekstowy język znaczników

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

CSS. Kaskadowe Arkusze Stylów

Pętle. Dodał Administrator niedziela, 14 marzec :27

Tworzenie prezentacji w MS PowerPoint

TWORZENIE PREZENTACJI MS POWERPOINT

Transkrypt:

Responsive Web Design Liczba użytkowników i funkcji urządzeń mobilnych wzrasta wykładniczo. Przeglądarki mobilne mogą teraz wyświetlać strony internetowe tak dobrze jak przeglądarki komputerów stacjonarnych, więc sporo ludzi przegląda strony internetowe na telefonach i tabletach. Projektanci zmuszeni są myśleć o nowych sposobach dostarczania stron dla użytkowników mobilnych; możemy zdecydowanie nie polegać na siatce statycznej, ponieważ rozmiary urządzeń mobilnych są zbyt różne. W 2010roku, Ethan Marcotte wymyślił sposób na tą sytuację,nazwaną Responsive Web Design [RWD], które stało się popularną praktyką projektowania stron internetowych celem dostarczania stron internetowych o różnych rozmiarach. Podstawowy RWD RWD zasadniczo pozwala witrynie reagować lub adaptować do różnych rozmiaru wyświetlaczy, mniejszych lub większych, bez konieczności określania specyficznej domeny/subdomeny dla ludzi używających urządzeń mobilnych. Wygląd i funkcjonalność witryny można utrzymać,aby mieć podobne doświadczenie przy różnego rozmiaru urządzeniach. Jest to możliwe przy użyciu meta znacznika viewport i zapytań mediów CSS Meta znacznik viewport i zapytania mediów CSS Witryna reagująca jest zbudowana głównie z dwóch elementów. Pierwszym składnikiem jest meta znacznik viewport. Znacznik ten jest umieszczony wewnątrz znacznika < head >i jest używany do sterowania skalą strony internetowej. Na przykład dodając meta znacznik viewport z initial-scale ustawionym na 1, spowodujemy,że strona internetowa będzie skalowana o 100 procent rozmiaru viewport po otwarciu go po raz pierwszy: <meta name="viewport" content="width=device-width, initial-scale=1"> Drugim elementem są zapytania mediów CSS, które określają style dla określonych rozmiarów viewport. Na przykład poniższy fragment kodu pokazuje jak można ukryć obrazy, kiedy rozmiar viewport jest między 321 a 480 pikseli @media screen and (min-width: 321px) and (max-width: 480px) { img { display: none; Ograniczenia Responsive Web Design W tym miejscu, RWD, nie jest całkiem perfekcyjny. istnieje kilka problemów do rozwiązania, w tym dopasowanie obrazu. Obecną praktyką dostosowania obrazu jest skalowanie go w taki sposób aby dopasować max-width viewport na 100% lub ewnetualie ukryć go z display : none kiedy obraz nie jest konieczny. Problem z tą praktyką polega na tym,że zmienia ona jedynie prezentację obrazu na powierzchni, podczas gdy rzeczywisty obraz w dokumencie HTML pozostaje nienaruszony. Oznacza to,że użytkownicy nadal będą pobierać obraz o takiej same rozdzielczości, o większym rozmiarze, niezależnie od rozmiaru urządzenia i rozmiaru pola widzenia, co spowoduje zmarnotrawienie zużycie pasma i może zaszkodzić wydajności strony na urządzeniu mobilnym Responsywny obraz z elementem obrazu

Ostatnio, World Wide Web Consortium (W3C),grupa nazwana Responsive Image Community Group, zaproponowała nowy element nazwany < picture > w celu rozwiązania problemu. Element < picture > umożliwia dostarczenie odpowiedniego rozmiaru obrazu i rozdzielczości w oparciu o konkretną sytuację. Spójrzmy na poniższy fragment kodu: <picture alt="responsive images"> <source src=big.jpg media="min-width:768px"> <source src=medium.jpg media="min-width:320px"> <source src=small.jpg> <img src=medium.jpg alt="responsive images"> </picture> Poprzedni fragment kodu dostarcza plik obrazu big.ipg o wysokiej rozdzielczości i prawdopodobnie o szerszej szerokości tylko wtedy gdy podgląd ma minimum 768 pikseli, natomiast plik obrazu medium.jpg o niższej rozdzielczości i rozmiarze zostanie dostarczony kiedy podgląd mam minimum 320 pikseli. Gdy te warunki nie zostaną spełnione, zostanie dostarczony mniejszy obraz small.jpg. Wreszcie, na dole listy mamy jeszcze jeden obraz z elementem < img >; jest dodatkowo wykorzystywany do tworzenia kopii obrazu dla przeglądarek, które nie wspierają elementu < picture >. Zobaczmy,jak możemy wykorzystać ten element w sytuacji, gdy skalowanie obrazu nie jest odpowiednim podejściem. Powiedzmy,że mamy bardzo szeroki obraz,taki jak panorama i chcemy użyć go jako nagłówka w naszej witrynie. Kiedy zobaczymy ten obraz na monitorze, najprawdopodobniej nie będzie żadnego problemu i obraz będzie widoczny. Jednak,kiedy oglądamy te obrazek w mniejszym podglądzie, obraz jest zbyt wąski a ludzie na zdjęciu ledwie widoczni, Jeśli na obrazie znajduje się tekst, czytanie będzie trudne. W takim przypadku bardziej rozsądne byłoby wyświetlenie różnych proporcji obrazu, niż skalowanie obrazu i używanie elementu < picture >. Wprowadzenie do struktury RWD Oczywiście,czy jesteś początkującym projektantem czy ekspertem, stworzenie elastycznej strony internetowej od podstaw może być skomplikowane. Jest tak prawdopodobnie ze względu na pewne niezbędne kwestie techniczne w RWD, takie jak określenie odpowiedniej liczby kolumn w siatce i obliczanie procentu szerokości każdej kolumny, określanie właściwego punktu przerwania i innych technikaliów, które zwykle pojawiają się na etapie rozwoju. Dlatego będziemy używać struktury/szkieletu, który sprawi,że wielce nam to pomoże. Dlaczego używać struktury? Oto kilka powodów, dla których korzystanie ze struktury jest dobrym wyborem: Oszczędność czasu: Jeśli zrobisz dobrze, użycie struktury może oczywiście oszczędzić wiele czasu. Struktura generalnie zawiera predefiniowane style i reguły, takie jak szerokość siatki, style przycisków, rozmiar czcionek, reset CSS i inne aspekty budowania strony internetowej. Więc nie musimy powtarzać tego samego procesu od początku ale po prostu postępujemy zgodnie z instrukcjami dla stosowania styli i znaczników Wspólnota i rozszerzenie : Popularne struktury najprawdopodobniej mają aktywną społeczność, która rozszerza funkcjonalności struktury. jquery UI Bootstrap jest być może dobrym tego przykładem; jest motyw jquery UI pasujący do wyglądu i motywu oryginalnego

motywu Bootstrap. Również Skeleton,ma rozszerzenie do motywów WordPressa; również Drupal Kompatybilność między przeglądarkami : To zadanie zapewnienia aby wyświetlenie strony internetowej w różnych przeglądarkach nie było bolesne. Ze strukturą, możemy zminimalizować ten problem, ponieważ programiści wykonali już tę pracę, nim framework został wydany. Został oto przetestowane w przeglądarkach ios. Android i Windows Phone 7. Dokumentacja: Dobry framework posiada swoją dokumentację. Dokumentacja będzie bardzo pomocna podczas pracy z zespołem. Istnieje wiele struktur, które można wybrać. ale te z którymi będziemy pracować to Skeleton, Bootstrap i Foundation. Spójrzmy. Skeleton Skeleton, jest minimalnym mechanizmem responsywnym; jeśli pracowałeś z frameworkiem 960.gs, Skeleton wyda Ci się znajomy. Skeleton ma 960 pikseli szerokości z 16 kolumnami w podstawowej siatce; jedyną różnicę jest to,że siatka jest teraz responsywna przez integrację z media queries CSS Bootstrap Bootstrap został pierwotnie stworzony przez Marka Otto i przeznaczony był do wewnętrznego stosowania w Twitterze. Krótka opowieść Bootstrap został potem uruchomiony jako bezpłatne oprogramowanie dla ludzi. We wczesnej wersji nie można było jeszcze uwzględnić tej funkcji; został on dodany w wersji 2, w odpowiedzi na rosnące zapotrzebowanie na RWD Bootstrap ma o wiele więcej funkcji niż Skeleton. Jest on wyposażony w stylizowane elementy interfejsu użytkownika powszechnie używanych interfejsów w witrynie, takie jak przyciski, nawigacja, podział stron i formularze. Poza tym, Bootstrap jest wspierany pewnymi niestandardowymi wtyczkami jquery, takimi jak tab, carousel, popover i modal box. Foundation Foundation została utworzona przez zespół ZURB, agencję projektującą produkty z siedzibą w Kalifornii. Podobnie jak w przypadku Bootstrap, Foundation jest nie tylko responsywną strukturą CSS; jest wyposażona w predefiniowane style dla wspólnego interfejsu użytkownika, takie jak przyciski, nawigacja i formularze. Oprócz tego jest wspierana prze pewne wtyczki jquery. Wady Korzystanie ze struktur powoduje pewne problemy, Oto najczęstsze frameworkami: problemy z Nadmierny kod: Ponieważ struktura jest szeroko stosowana, musi uwzględniać każdy scenariusz projektowania, a więc również dodatkowe style, które mogą nie być potrzebne w Twojej witrynie. Z pewnością można uporządkować style i usunąć je, ale ten proces w zależności od struktury może to zająć wiele czasu Krzywa uczenia : Za pierwszym razem prawdopodobnie będzie trzeba poświęcić trochę czasu aby dowiedzieć się jak działa framework. w tym badanie klas CSS, identyfikatora, nazw. i prawidłowego formatowania HTML. Ale to nastąpi prawdopodobnie tylko podczas pierwszej próby

Mniejsza elastyczność: Frameworki mają prawie zawsze wszystko skonfigurowane, w tym szerokość siatki, style przycisków i granice promienia, i są zgodne ze standardami programistów. Jeśli rzeczy nie działają tak jak chcemy, zmiana może potrwać wiele czasu, a jeśli nie zostanie wykonane poprawnie, może zniszczyć całą strukturę kodu Narzędzia wymagane do tworzenia witryn responsywnych Istnieje kilka narzędzi, których będziemy potrzebowali do budowy naszej strony. Potrzebujemy przeglądarek internetowych. edytorów kodu i responsywnych skryptozakładek dla testowania responsywnego projektu Przeglądarki internetowe Będziemy potrzebowali przeglądarki internetowej aby wyświetlić wynik naszej pracy. Możemy wypróbować przeglądarki dostępne na rynku, aby przekonać się,że nasza witryna będzie się wyświetlać poprawnie we wszystkich tych przeglądarkach Edytory Kodu Edytor kodu jest niezastąpionym narzędziem dla tworzenia witryny. Technicznie, można używać dowolnego edytora kodu, pod warunkiem,że poprawnie podświetla kod. OS Windows Edytory Kodu Notepad++ (http://notepad-plus-plus.org/) WebMatrix (http://www.microsoft.com/web/webmatrix/) TextPad (http://www.textpad.com/) OS X TextWrangler (http://www.barebones.com/products/ textwrangler/) MacVim (http://code.google.com/p/macvim/) Linux Brackets (http://brackets.io/) Gedit (http://projects.gnome.org/gedit/) Geany (http://www.geany.org/) BlueFish (http://bluefish.openoffice.nl/index.html) Responsywne skryptozakładki Najlepiej jest przetestować strony internetowe responsywne na prawdziwych urządzeniach przenośnych. Ale jeśli budżet nie pozwala, można użyć narzędzia nazywanego responsywną skrytpozakłądką. Jest to rodzaj emulatora do testowania responsywnego projektu przez zmianąe wymiaru widocznego obszaru w przeglądarce. Jest wiele dostępnych skryptozakładek.oto niektóre z nich RWD demonstration (http://jamus.co.uk/demos/rwd-demonstrations/) Screenqueri.es (http://screenqueri.es/) Responsinator (http://www.responsinator.com/) ResposnivePX (http://responsivepx.com/)

Resizer (http://codebomber.com/jquery/resizer/) Screen Fly (http://quirktools.com/screenfly/) Adobe Edge Inspect (http://html.adobe.com/edge/inspect/) Jeśli używasz Firefox 15 lub wyższego, możesz użyć wbudowanej funkcji Tryb responsywny. Narzędzia - Tryb responsywny Krótkie wprowadzenie do preprocesorów CSS Jest jedna rzecz, którą musimy omówić przed rozpoczęciem prac nad projektami, mianowicie preprocesory CSS. Co to jest? Po prostu, preprocesor CSS rozszerza możliwości CSS. Przez użycie preprocesora CSS możemy tworzyć CSS w bardziej dynamiczny sposób. Preprocesory CSS pozwalają nam na użycie zmiennych i funkcji, jak w językach programowania takich jak JavaScript i PHP, do tworzenia stylów. Już dziś jest dostępnych preprocesorów CSS, takich jak LESS, Sass czy Stylus. My ograniczymy się do LESS i Sass Narzędzia kompilatora preprocesora CSS Preprocesory CSS,takie jak LESS czy Sass, są napisane w języku, którego przeglądarki nie rozpoznają. Musimy więc skompilować je w standardowej formie CSS, którą przeglądarki mogą odczytać i dostarczyć wyniki z kompilatora. LESS LESS jest preprocesorem CSS opartym o JavaScript, stworzonym przez Alexis Selliera. Jak wspomniano, LESS jest używany przez Bootstrap. Pozwala nam tworzyć style z niektórymi funkcjami programowania. Poniżej wymieniamy te, których będziemy używać: Reguły zagnieżdżania Zmienne Mieszanki Mixy parametryczne Operacje Reguły zagnieżdżania Tradycyjnie w CSS, kiedy musimy zastosować style dla elementów, powiedzmy dla elementu nav z class ustawiona na nav-primary, możemy zapisać style w następujący sposób:.nav-primary { background-color: #000; width: 100%;.nav-primary ul { padding: 0; margin: 0;.nav-primary li { display: inline;

.nav-primary li color: #fff;.nav-primary li a:hover { color: #ccc; Jak widać, powtarzamy selektor klas nadrzędnych,.nav-primary, za każdym razem, gdy stosujemy style do elementów znajdujących się pod nim. Z LESS możemy wyeliminować to powtarzanie i nieco uprościć ten kod przez zagnieżdżenie reguł CSS, jak pokazano w przykładzie:.nav-primary { background-color: #000; width: 100%; ul { padding: 0; margin: 0; li { display: inline; color: #fff; &:hover { color: #ccc; W tym kodzie nie ma nic ciekawego; właśnie napisaliśmy to w inny sposób, zagnieżdżając reguły stylu. Zmienne Zmienne w LESS, jak we wszystkich językach programowania, są przydatne do przechowywania stałej lub stałej wartości; ta wartość może być później przypisana do całego arkusza stylów. W LESS zmienna jest definiowana ze znakiem @ po którym występuje nazwa zmiennej. Nazwa zmiennej może być kombinacją liczb i liter. W poniższym przykładzie utworzymy kilka zmiennych LESS dla przechowania kolorów i przypisania zmiennych do reguł stylu aby przekazać wartość @primarycolor: #234fb4; @secondarycolor: #ffb400; color: @primarycolor; background-color: @secondarycolor;

W regularnym CSS, poprzedni kod byłby skompilowany do następującego fragmentu kodu: color: #234fb4; background-color: #ffb400; Korzystanie ze zmiennych nie ogranicza się jednak do przechowywania kolorów, jak wykazano w poprzednim przykładzie. Możemy używać zmiennych do innych typów wartości, takich jak rozmiar promienia, na przykład: @smallradius : 3px; Jedna z zalet stosowania zmiennych jest to,że w przypadku konieczności wprowadzenia zmian nie musimy przeszukiwać całego arkusza stylów; możemy po prostu zmienić zmienną. To z pewnością oszczędza czas. Mieszanki Mieszanki są jak zmienne; jednakże zamiast przechowywać pojedynczą wartość, możemy przechowywać zestaw właściwości CSS. Właściwości te mogą być później dziedziczone przez inne zestawy reguł CSS. Powiedzmy,że w arkuszu stylów znajdują się następujące reguły CSS:.links { -webkit- -mox- font-weight: bold;.box { -webkit- -mox- position: absolute; top: 0; left: 0;. -webkit- -mox- W poprzednim przykładzie, zadeklarowaliśmy border-radius w trzech różnych regułach CSS. Za każdym razem, kiedy deklarujemy go w różnych regułąch CSS, musismu dodać prefiksy dla wcześniejszych przeglądarek. W LESS, możemy dodać granicę promienia i dziedziczyć przez inne reguły CSS, w arkuszach stylów używających mieszanki. Mieszanka w LESS jest po

prostu zdefiniowana za pomocą selektora klasy, w tym przykadzie, tworzymy mieszankę nazwaną border-radius:.border-radius { -webkit- -moz- Potem wstawiamy.border-radius do innych reguł CSS dla przekazania tych samych właściwości :.links {.border-radius; font-weight: bold;.box {.border-radius; position: absolute; top: 0; left: 0;..border-radius; Mixy parametryczne Możemy rozszerzyć mieszanki o funkcje, lub w tym przypadku, oficjalnie nazwane : mixy parametryczne. Metoda ta pozwala nam dodawać argument lub zmienne i tworzyć konfigurowalne mixy. Zobaczmy używany tu przykład. Użyjemy tego ostatniegi. Ale tym razem nie przypiszemy stałej wartości; zamiast tego zastąpimy ją zmienną:.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; Teraz możemy wstawić tą mieszankę do innych zasad CSS i przypisać różne wartości dla każdego.border-radius(3px); font-weight: bold; div {.border-radius(10px); position: absolute; top: 0;

left: 0;.border-radius(12px); Kiedy kompilujemy to do regularnego CSS a, poprzedni kod LESSS byłby skonwertowany jak następuje: -webkit- -moz- font-weight: bold; div { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: absolute; top: 0; left: 0; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; Jak widać z przykładów, ta praktyka może być przydatna podczas pracy z właściwościami CSS3, eliminując konieczność wielokrotnego pisania prefiksów dostawcy. Operacje Możemy również wykonać proste operacje matematyczne z LESS, takie jak dodawanie, odejmowanie, dzielenie i mnożenie. Operacje mogą być przydatne w pewnych okolicznościach. W tym przykładzie obliczamy właściwą szerokość pudełka przez odjęcie wypełnienia tak aby mogło się zmieścić w pojemniku nadrzędnym. Najpierw definiujemy zmienną dla wypełnienia,@padding: @padding : 10px; Potem, określamy szerokość pola i odejmujemy zmienną @padding od niego.box { padding: @padding; width: 500px (@padding * 2);

Pamiętaj,że wypełnienie bierze dwie strony pudełka, albo prawo i lewo albo góra i dół, dlatego mnożymy @padding w width razy 2. W końcu, kiedy kompilujemy opeację LESS w regularnym CSS, przykładowy kod będzie wyglądał następująco:.box { padding: 10px; width: 480px; W innym przypadku, możemy zrobić to samo z właściwością height:.box { padding: @padding; width: 500px (@padding * 2); height: 500px (@padding * 2); Sass (Syntactically Awesome Stylesheets Sass jest preprocesorem CSS opartym na Ruby, stworzonym przez Hamptona Catlina, Nathana Weizenbauma i Chria Eppsteina. Podobnie jak LESS Sass ma możliwość dodawania zmiennych, mieszanek i zagnieżdżonych reguł, choć z kilkoma różnicami. Przyjrzyjmy się każdej z nich Zmienne W Sass, zmienna jest definiowana ze znakiem $. Podobnie jak w naszym przykładzie z LESS, tu definiujemy podstawowy kolor w zmiennej Sass $primarycolor i przypisujemy ją do reguły stylu: $primarycolor: #234fb4; color: $primary; background-color: $primarycolor; Podobnie do LESS, kiedy kompilujemy ten kod w regularnym CSS, jest to konwertowane jak następuje: color: #234fb4; background-color: #234fb4; Mieszanki W Sass, mieszanka jest definiowana nieco inaczej niż LESS. Mieszanka w Sass jest definiowana dyrektywą @mixin. Podobnie jak w poprzednim przykładzie w sekcji LESS, tu

definiujemy mieszankę dla promienia granicznego a potem przypisujemy go do innych reguł dyrektywą @include: @mixin border-radius { -webkit- -moz- @include border-radius; font-weight: bold; div { @include border-radius; position: absolute; top: 0; left: 0; @include border-radius; Ponadto, możemy również dodać argument do mieszanki Saas, podobnie jak zrobiliśmy to w LESS : @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; Reguły zagnieżdżone Sass również pozwala nam na reguły zagnieżdżone, ale ta metoda idzie jeden krok dalej. W Sass, możemy zagnieżdżać pojedynczą właściwość. Pokażemy jak to zrobić. Przede wszystkim, w regularnym CSS czasami definiujemy style z ich indywidualnymi właściwościami : div { border-color: #ccc; border-style: solid; border-width: 5px; W Sass, możemy zagnieździć tą regułę w poniższy sposób: div { border: { color: #ccc; style: solid; width: 5px;

Dziedziczenie selektora Dziedziczenie selektora brzmi jak mieszanka, ale działa w inny sposób. Podczas gdy mieszanka dzieszi style do innych przypisanych selektorów, dziedziczenie selektora ostatecznie grupuje selektory, które dzielą określone style. W poniższym przykładzie mamy klasę.button, która definiuje ogólne style przycisku. padding: 5px 15px; color: #fff; border: 1px solid #000; Mamy też dwa typy przycisków, mianowicie Submit i Reset, a każdy z ich będzie zdefiniowany w klasie.submit i.reset, odpowiednio. Przyciski te mają style ogólne, z wyjątkiem koloru tła do przekazania ich różnych celów. W tym przypadku, możemu użyć dziedziczenia selektora przez przypisanie klasy.button do innych reguł, dyrektywą @extend, jak pokazano poniżej:.submit { @extend.button; background-color: green;.reset { @extend.button; background-color: red; W przeciwieństwie do metod mieszanki, które po prostu duplikują właściwości CSS do przypisanych reguł, dziedziczenie selektora, jak wspomniano, będzie grupowało selektory, które mają te same style z klasy.button. Poprzedni kod będzie konwertowany na poniższy, kiedy kompilujemy regularnym CSS..button,.submit,.reset { padding: 5px 15px; color: #fff; border: 1px solid #000;.submit { background-color: green;.reset { background-color: red;