Absolutnie wszyscy doświadczeni instalatorzy używają preprocesorów. Bez wyjątków. Jeśli chcesz odnieść sukces w tym działaniu, nie zapomnij o tych programach. Na pierwszy rzut oka mogą nazwać początkującego spokojnym horrorem - jest już zbyt podobny do programowania! W rzeczywistości możesz radzić sobie ze wszystkimi możliwościami preprocesorów CSS około jednego dnia, a jeśli spróbujesz, to przez kilka godzin. W przyszłości znacznie uprości to twoje życie.
Jak powstały preprocesory CSS
Aby lepiej zrozumieć cechy tej technologii, krótko zapoznamy się z historią rozwoju wizualnej prezentacji stron internetowych. Kiedy masowe korzystanie z Internetu dopiero się rozpoczęło, nie istniały arkusze stylów. Przetwarzanie dokumentów zależało całkowicie od przeglądarek. Każdy z nich miał własne style, które były używane do obsługi niektórych tagów. W związku z tym strony wyglądały inaczej w zależności od przeglądarki, w której je otworzyłeś. Rezultatem jest chaos, zamieszanie, problemy dla programistów.
W 1994 r. Norweski naukowiec, Hookon, opracował arkusz stylów, który można wykorzystać do odróżnienia wyglądu strony od dokumentu HTML. Pomysł był współfinansowany przez przedstawicieli konsorcjum W3C, który natychmiast podjął się jego sfinalizowania. Kilka lat później ukazała się pierwsza wersja specyfikacji CSS. Potem była stale doskonalona, doskonała Ale koncepcja pozostała ta sama: każdy styl ma określone właściwości.Używanie tabel CSS zawsze powodowało pewne problemy. Na przykład projektanci często mają trudności z sortowaniem i grupowaniem właściwości, a przy dziedziczeniu nie wszystko jest tak jednoznaczne. A teraz przybyli dwa tysiące. Marka coraz częściej zaczęła być zajmowana przez profesjonalnych programistów front-end, dla których ważna była elastyczna i dynamiczna praca ze stylami. W tym czasie CSS wymagało umieszczenia prefiksu i śledzenia obsługi nowych możliwości przeglądarki. Następnie specjaliści javascript i Ruby podjęli tę kwestię, tworząc preprocesory - dodatki do CSS, dodając do niego nowe funkcje.
CSS dla początkujących: cechy preprocesorów
Pełnią kilka funkcji:
ujednolicają prefiksy przeglądarki i khaki; uprościć składnię; zapewniają możliwość pracy z selektorami osadzonymi bez błędów; poprawiają logikę stylizacji.Brief: Preprocesor dodaje logikę programowania do możliwości CSS. Teraz stylizacja odbywa się nie poprzez zwykły transfer stylów, ale przez kilka prostych technik i podejść: zmienne, funkcje, mixiny, cykle, warunki. Ponadto istniała możliwość wykorzystania matematyki.
Widząc popularność tych dodatków, W3C zaczęło stopniowo dodawać swoje możliwości do kodu CSS. Na przykład w specyfikacji pojawiła się funkcja calc () obsługiwana przez wiele przeglądarek. Oczekuje się, że wkrótce będzie można określić zmienne i stworzyć miksiny. Jednak stanie się to w odległej przyszłości, a preprocesory już tu są i już są doskonałe.
Popularny preprocesor CSS. Sass
Opracowany w 2007 roku. Pierwotnie był składnikiem Haml szablonu HTML. Nowe funkcje do zarządzania elementami CSS trafiły do owocowych programistów w Ruby on Rails, które zaczęły rozprzestrzeniać się wszędzie. W Sassie było mnóstwo funkcji, które są teraz zawarte w każdym preprocesorze: zmienne, selektory załączników, miksin (wtedy jednak nie mogły dodać argumentów).
Deklaracja zmiennych w Sass
Zmienne są deklarowane za pomocą symbolu $. Mogą przechowywać właściwości i ich zestawy, na przykład: "$ borderSolid: 1px solid red". W tym przykładzie ogłosiliśmy zmienną o nazwie borderSolid i 1px solid red. Teraz, jeśli w CSS musimy utworzyć czerwoną szerokość obramowania 1px, po prostu określa tę zmienną po nazwie właściwości. Po deklaracji zmiennych nie można zmienić. Dostępnych jest kilka wbudowanych funkcji. Na przykład zadeklaruj $ redColor o wartości # FF5050. Teraz w kodzie CSS we właściwościach elementu używamy go do określenia koloru czcionki: p {color: $ redColor;}. Chcesz eksperymentować z kolorem? Użyj funkcji przyciemnienia lub rozjaśnienia. Robi się to w następujący sposób: p {color: darken ($ redColor, 20%);}. W rezultacie kolor czerwonego koloru będzie o 20% lżejszy.
Sass ma wiele wbudowanych funkcji. Zalecamy przynajmniej zapoznać się z nimi i najlepiej je poznać.
Załącznik
Poprzednio, aby wskazać zagnieżdżenie, musiałem zastosować długie i niewygodne projekty. Wyobraźmy sobie, że mamy div, w którym leży p, a w nim, skręt, znajduje się rozpiętość. Dla div musimy ustawić kolor czcionki na czerwony, dla p - żółty, dla zakresu -ławka W typowym CSS zrobiono to w następujący sposób: div {color: red; } div p {color: yellow; } div p span {color: pink; } Dzięki preprocesorowi CSS wszystko jest łatwiejsze i bardziej kompaktowe: div {color: red; p {kolor: żółty; .span {color: pink; }}} Elementy są dosłownie "osadzone" jeden na drugim.
Dyrektywa preprocesora
Możesz importować pliki za pomocą dyrektywy @import. Na przykład mamy plik fonts.sass, w którym deklarowane są style czcionek. Połącz go z głównym plikiem style.sass: @import 'fonts'. Zrobione! Zamiast jednego dużego arkusza stylów mamy kilka, których można użyć do szybkiego i łatwego dostępu do niezbędnych właściwości.
Miksini
Jeden z najciekawszych pomysłów. Pozwala jednej linii na określenie zestawu właściwości. Działają tak: @mixin bigFont {font-family: 'Times New Roman'; rozmiar czcionki: 64 pikseli; wysokość linii: 80 pikseli; font-weight: bold; } Aby zastosować miksin do elementu na stronie, użyj dyrektywy @include. Na przykład chcemy zastosować go do nagłówka h1. Otrzymano następujący wzór: h1 {@include: largeFont;}
Wszystkie właściwości mxin zostaną przypisane do h1.
Preprocessor Less
Składnia Sass przypomina o programowaniu. Jeśli szukasz opcji najlepiej dostosowanej dla początkujących CSS, zwróć uwagę na mniej. Powstał w 2009 roku. Główną cechą - wsparcie natywnej składni CSS, tak aby nie byli oni obeznani z programowaniem maszynistek, będzie łatwiej opanować. Zmienne są deklarowane za pomocą symbolu @. Na przykład: @fontSize: 14px;. Załącznik działa na tych samych zasadach, co w Sassie. Miksiny są zadeklarowane w następujący sposób: .largeFont (){rodzina czcionek: "Times New Roman"; rozmiar czcionki: 64 pikseli; wysokość linii: 80 pikseli; font-weight: bold;}. Aby się połączyć, nie trzeba używać dyrektyw preprocesora - wystarczy dodać świeżo uformowany miksin we właściwościach wybranego elementu. Na przykład: h1 {.largeFont;}.
Stylus
Kolejny preprocesor. Stworzony w 2011 roku przez tego samego autora, który zaprezentował świat Jade, Express i innych użytecznych produktów. Zmienne można zadeklarować na dwa sposoby - jawnie lub niejawnie. Na przykład: font = 'Times New Roman'; - jest to opcja domyślna. Ale $ font = 'Times New Roman' jest oczywiste. Miksiny są ogłaszane i łączone niejawnie. Składnia jest następująca: redColor () color red. Teraz możemy dodać jego element, na przykład: h1 redColor ();. Na pierwszy rzut oka rysik może wydawać się niejasny. Gdzie są nawiasy i średniki rodzica? Ale warto po prostu zanurzyć się w nim, wszystko staje się o wiele jaśniejsze. Należy jednak pamiętać, że przedłużony rozwój tego preprocesora może "zniechęcić" do używania klasycznej składni CSS. To czasami powoduje problemy z koniecznością pracy z "czystymi" stylami.
Jaki preprocesor wybrać?
W rzeczywistości to nie ma znaczenia. Wszystkie opcje zapewniają w przybliżeniu te same możliwości, tylko składnia jest inna dla wszystkich. Zalecamy wykonanie następujących czynności:
jeśli jesteś programistą i chcesz pracować ze stylami takimi jak kod, użyj Sass; Jeśli jesteś webmasterem i chcesz pracować ze stylami takimi jak zwykły układ, zwróć uwagę na Less; Jeśli lubisz minimalizm, użyj rysika.Dla wszystkich wariantów istnieje ogromna liczba interesujących bibliotek, które mogą jeszcze bardziej uprościć rozwój.Użytkownicy Sass powinni zwracać uwagę na Compass - potężne narzędzie z wieloma wbudowanymi funkcjami. Na przykład po instalacji nigdy nie będziesz musiał się martwić o prefiksy dostawców. Uproszczona praca z sieciami. Istnieją narzędzia do pracy z kolorami, sprite'ami Dostępna jest już liczba zapowiedzianych mixinów. Daj mu kilka dni - zaoszczędzisz wiele czasu i wysiłku w przyszłości.
