Preprocesor CSS: przegląd, selekcja, aplikacja

Absolutnie wszyscy doświadczeni projektanci stron internetowych używać preprocesora. Nie ma wyjątków. Jeśli chcesz odnieść sukces w tej działalności, nie zapomnij o tych programach. Na pierwszy rzut oka, mogą one spowodować początkujący cichej grozy – jest zbyt podobny do programowania! W rzeczywistości, można radzić sobie ze wszystkich funkcji CSS preprocesora przez około jeden dzień, a jeśli spróbujesz, to kilka godzin. W przyszłości będą one znacznie uprościć swoje życie.

Skąd preprocesor CSS

Aby lepiej zrozumieć właściwości tej technologii, krótko zagłębić się w historii wizualnej prezentacji stron internetowych.

Kiedy dopiero się rozpoczęła masowe korzystanie z Internetu, nie istnieją żadne arkusze stylów. Wykonanie dokumentacji zależała wyłącznie od przeglądarce. Każdy z nich miał swoje własne style, które zostały wykorzystane w leczeniu niektórych tagów. W związku z powyższym strony wyglądają inaczej w zależności od kolejności, w jakiej przeglądarka je otworzyć. Rezultat – chaosu dezorientacja, problemy dla programistów.

W 1994 roku norweski naukowiec Håkon Lie opracowany arkusz stylów, które mogą być używane do wyglądu stron osobno z dokumentu HTML. W priglanulas pomysł członkami W3C, który natychmiast określoną zakończenia. Kilka lat później wydał pierwszą wersję specyfikacji CSS. Potem był ciągle udoskonalany, finalizowane … Ale koncepcja pozostała wszystkie takie same: każdy styl ustawić pewne właściwości.

Korzystanie z tabel CSS zawsze było problematyczne. Dla przykładu, projektanci stron internetowych często miał problemy z sortowania i grupowania funkcji i dziedziczenie nie jest tak prosta.

A potem przyszło dwóch tysięcy. Oznaczenia są coraz częściej zaczął angażować się w profesjonalnych programistów front-end, co jest ważne, aby być elastyczny i dynamiczny styl pracy. Istniał w czasie zażądał umieszczenia przedrostków CSS i wspierać nowe możliwości przeglądarki śledzenia. Następnie przez JavaScript, a eksperci Ruby dostał się do pracy, tworząc preprocesor – wymienne na CSS, dodawane są nowe funkcje do niego.

CSS dla początkujących: Cechy preprocesora

Mają kilka funkcji:

• ujednolicenie przedrostki przeglądarek i khaki;

• uproszczenia składni;

• dać możliwość pracy z zagnieżdżonych selektorów bez błędów;

• poprawy logiki stylizacji.

W skrócie: preprocesor CSS dodaje funkcje logiczne programowanie. Teraz, stylizacja nie odbywa się w zwykły listę stylów i za pomocą kilku prostych technik i podejść: zmienne, funkcje, śluzic rowery warunkach. Dodatkowo możliwość korzystania z matematyki.

Widząc popularność tych dodatków, W3C zaczęły stopniowo dodać możliwość nich w kodzie CSS. Na przykład, w opisie więc funkcję tam Obliczono (), który jest obsługiwany przez wielu przeglądarek. Oczekuje się, że wkrótce będzie można ustawić zmienne i stworzyć śluzic. Będzie to jednak nastąpić w odległej przyszłości, a Preprocesory już tutaj i już działa dobrze.

Popularne Preprocesory CSS. Sass

Zaprojektowany w 2007 roku. Pierwotnie składnik haml – szablon HTML. Nowe funkcje dla elementów CSS kontrolować rozkoszował deweloperom na Ruby on Rails, który zaczął się rozprzestrzeniać je wszędzie. Sass ogromna liczba funkcji, które są obecnie zawarte w każdym preprocesora: zmienne, zatapiania selektorów, śluzic (wtedy jednak te argumenty nie mogą zostać dodane).

Deklarowanie zmiennych w Sass

Zmienne zadeklarowane ze znakiem $. Mogą utrzymywać swoje właściwości i zestawy, na przykład: "$ borderSolid: 1px solid red;". W tym przykładzie, zadeklarowaliśmy zmienną o nazwie borderSolid i zapisaniu go cenią 1px solid red. Teraz, gdy w CSS musimy stworzyć czerwoną obwódką szerokości 1px, po prostu oznacza, że zmienna po nazwie właściwości. Po ogłoszeniu zmiennych nie mogą być zmieniane. Istnieje kilka wbudowanych funkcji. Na przykład zadeklarować zmienną o wartości $ redcolor # FF5050. Teraz, w kodzie CSS we właściwościach każdego elementu, należy go ustawić kolor czcionki: p {color: $ redColor; }. Chcesz poeksperymentować z kolorem? Użyj funkcji przyciemnia lub rozjaśnia. Dzieje się tak, P {Kolor przyciemnienia ($ redColor, 20%); }. W rezultacie, redColor kolor będzie 20% lżejszy.

Sass wiele wbudowanych funkcji. Warto przynajmniej je czytać, ale lepiej – do nauki.

gniazdowania

Wcześniej, aby wskazać zagnieżdżania musiał użyć długą i niewygodną konstrukcję. Wyobraźmy sobie, że mamy div, który jest p, aw nim z kolei ustawić rozpiętość. Dla div, musimy ustawić kolor czcionki czerwony, dla p – żółty, o rozpiętości – różowy. W typowym CSS byłoby to zrobić w następujący sposób:

div {

color: red;

}

div p {

Kolor: żółty;

}

Gr P {rozpiętość

kolor: różowy;

}

Z CSS preprocesora wszystko staje się łatwiejsze i bardziej kompaktowe:

div {

color: red;

p {

Kolor: żółty;

.span {

kolor: różowy;

}

}

}

Elementy dosłownie „zainwestowane” nawzajem.

dyrektywy preprocesora

Korzystanie z dyrektyw @import może importować pliki. Na przykład, mamy plik fonts.sass który deklaruje style czcionek. Podłączyć go do głównego style.sass pliku: @import „czcionki”. Gotowe! Zamiast jednego dużego pliku z stylów mamy kilka, które mogą być wykorzystywane do szybkiego i łatwego dostępu do wymaganych właściwości.

śluzic

Jednym z najbardziej interesujących pomysłów. Pozwala ona jedną linię do zadawania zestaw właściwości. Działać w następujący sposób:

@mixin largeFont {

font-family: 'Times New Roman';

czcionki, rozmiar: 64px;

linia wysokość: 80px;

czcionki wagi: pogrubienie;

}

Śluzic stosuje się do elementu na stronie, użyć dyrektywy @include. Na przykład chcemy, aby zastosować go do nagłówka h1. Mamy następującą strukturę: h1 {@include: largeFont; }

Wszystkie właściwości śluzic są przypisany h1 element.

preprocesor Mniej

Składnia Sass przypomina programowanie. Jeśli szukasz opcji, która jest bardziej odpowiednia dla początkujących, uczących CSS, wygląd za mniej. Powstał w 2009 roku. Główną cechą – wsparcie dla CSS natywnej składni, więc znają programowania nakładającego łatwiej będzie się uczyć.

Zmienne deklarowane są za pomocą symbolu @. Na przykład @fontSize: 14 pikseli,. Gniazdowania działa na takich samych zasadach jak w Sass. Śluzic ogłaszane są w następujący sposób: .largeFont () {font-family: 'Times New Roman'; czcionki, rozmiar: 64px; linia wysokość: 80px; czcionki wagi: pogrubienie; }. Aby połączyć to nie jest konieczne stosowanie dyrektyw preprocesora – wystarczy dodać nowo utworzony śluzic we właściwościach wybranego elementu. Na przykład: {.largeFont h1; }.

igła

Innym preprocesora. Utworzony w 2011 roku przez samego autora, który dał światu Jade, wyrażania i innych użytecznych produktów.

Zmienne mogą być deklarowane na dwa sposoby – bezpośrednio lub pośrednio. Na przykład: font = 'Times New Roman'; – niejawna opcja. Ale $ font = 'Times New Roman' – jasne. Śluzic są zadeklarowane i pośrednio podłączone. Składnia jest następujący: redColor (kolor czerwony). Teraz możemy dodać element, na przykład: h1 redColor ();.

Stylus na pierwszy rzut oka może wydawać się niezrozumiałe. Gdzie jest „native” wsporniki i średniki? Ale konieczne jest zanurzyć się w nim, wszystko staje się dużo jaśniejsze. Należy jednak pamiętać, że rozwój długoterminowy tego preprocesora można „odzwyczaić” użyć klasycznej składni CSS. To czasami powoduje problemy przy konieczności pracy z „czystego” stylu.

Co preprocesor wybrać?

W rzeczywistości, to jest … to nie ma znaczenia. Wszystkie wersje oferują o takich samych cechach właśnie składnia każdy jest inny. Zaleca się postępować w następujący sposób:

• jeśli – programista i chcą pracować ze stylami, zarówno w kodzie, należy użyć Sass;
• jeśli – koder i chcą pracować ze stylami jak w konwencjonalnym układzie, należy zwrócić uwagę na mniej;
• jeśli lubisz minimalizm, należy użyć rysika.

Dla wszystkich wariantów nieskończoną ilość ciekawych bibliotek, które mogą jeszcze bardziej uprościć rozwój. Użytkownicy Sass zaleca się zwrócić uwagę na kompas – potężne narzędzie z wieloma wbudowanymi funkcjami. Na przykład, po zainstalowaniu go nigdy nie będziesz musiał się martwić o prefiksie wersji sprzedawca. Ułatwia pracę z sieci. Istnieją narzędzia do pracy z kwiatami, duszków. Zakres ogłosił już śluzic. Narzędzie to dać kilka dni – w ten sposób można zaoszczędzić wiele czasu i wysiłku w przyszłości.