W tej chwili jestem pewien, że słyszałeś o Sassie i " Naprawdę musisz zacząć go używać!"
Nauka nowego narzędzia może się zassać, a znalezienie czasu na to jest prawie niemożliwe, ale czasami pojawia się narzędzie, które zmienia naszą branżę i jest zbyt dobre, aby je zignorować.
Ponieważ nasze strony internetowe i aplikacje stają się bardziej złożone, nasze arkusze stylów stają się coraz większe i trudniejsze do utrzymania. Preprocesory CSS, takie jak Sass, pomagają zachować zwięzłość naszych arkuszy stylów i pozwalają nam modularyzować nasz kod, oferując cały szereg funkcji, które nie są jeszcze dostępne w zwykłym CSS.
Te dodatkowe funkcje sprawiają, że są naprawdę fajne w użyciu! Teraz możesz zobaczyć coś, co wygląda tak:
$i: 6;@while $i > 0 {.item-#{$i} {szerokość: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
i pomyślał: "Whatttttttttttt? Dzięki, ale zachowam moje regularne "CSS".
Przyznaję, że wygląda zniechęcająco, a niektórzy ludzie robią naprawdę szalone rzeczy, skomplikowane rzeczy z Sassem, ale jestem tu, by powiedzieć ci, że każdy może zacząć z niego korzystać, a zyski, które otrzymasz pierwszego dnia, uczynią cię wierzącym Sassa.
Przygotowanie Sass do projektu jest nieco poza zakresem tego artykułu, ale instalacja jest stosunkowo łatwa, a strona Sass ma instrukcje dla systemu Linux, Mac lub PC. Najśmieszniejsze jest to, że po zainstalowaniu możesz pobrać dowolny plik CSS i zmienić jego nazwę .scss co czyni go plikiem Sass.
Cały poprawnie sformatowany CSS jest prawidłowy Sass!
Oznacza to, że możesz zacząć używać Sassa, kontynuując pisanie swoich stylów, jak zawsze, powoli wprowadzając więcej funkcji w miarę wzrostu twojego poziomu komfortu. To prawda ludzie, po prostu ten sam ol ". takie same, ale tutaj masz pięć wspaniałych osiągnięć, które teraz masz do swojej dyspozycji:
Czym jest ten główny kolor nagłówka? Jak napisać ten stos czcionek? Ile razy pisałeś CSS i musiałeś przeszukać poprzednie style, by uzyskać wartość lub musiałeś przełamać zakraplacz, jeszcze raz, aby dowiedzieć się, że kolor szesnastkowy?
Sass udostępnia zmienne jako sposób przechowywania informacji, które chcesz ponownie wykorzystać w arkuszu stylów. Teraz możesz przechowywać tę wartość koloru lub długi stos czcionek jako coś łatwego do zapamiętania. Sposób, w jaki deklarujesz zmienną, ma znak dolara $ a następnie imię. Ta nazwa może być tym, czym chcesz. Następnie wpisujesz dwukropek : a następnie wartość i średnik ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Teraz, jeśli chcesz użyć jednej z tych wartości, możesz po prostu użyć zmiennej.
.mySelector { font-family: $mainFont; color: $mainColor; }
Wspaniale, prawda? Ta jedna funkcja sprawia, że warto ją zainstalować, ponieważ oszczędza ona tyle czasu podczas tworzenia CSS. Jest tak wielki, że prawdopodobnie trafi do CSS spec ale kto wie, kiedy będziemy mogli z niego korzystać? Na szczęście dla nas, z Sass, nie musimy czekać.
Teraz możesz powiedzieć sobie "CSS ma @import, to nie jest fajne" i masz rację, ale wersje CSS i Sass różnią się w znaczący sposób. W normalnym CSS @import pobiera inne arkusze stylów, ale robi to, wykonując inne żądanie HTTP, czego zwykle chcemy uniknąć. Z tego powodu możesz nie używać nawet @import wcześniej. Natomiast Sass to preprocesor (nacisk na pre), który ściągnie ten plik, zanim skompiluje CSS.
Wynikiem jest jedna strona CSS obsługiwana przez jedno żądanie HTTP. Oznacza to, że możesz podzielić swoje css na mniejsze, łatwiejsze w utrzymaniu porcje, a jednocześnie udostępniasz tylko jedną stronę przeglądarce. Potrzebujesz naprawić tekst na przycisku? Koniec z przeglądaniem arkuszy stylów szukających odpowiednich stylów przycisków. Wystarczy otworzyć przycisk częściowy i wprowadzić zmiany.
Co jest częściowe? Tylko jak brzmią. Są to częściowe pliki Sass zawierające małe fragmenty CSS, które można dołączyć do innych plików Sass. Są one nazwane za pomocą wiodącego podkreślenia, po którym następuje nazwa. _myFile.scss . Podkreślenie pozwala Sass wiedzieć, że plik jest tylko częściowym plikiem i nie powinien być wkompilowany w CSS. Aby zaimportować to częściowe, wystarczy dodać plik @import do pliku w następujący sposób:
@import 'partials/myPartial';
Dlatego importuję _myPartial.scss, który znajduje się w folderze o nazwie partials. Nie musisz uwzględniać podkreślenia ani rozszerzenia pliku. Sass jest na tyle sprytny, aby wiedzieć, który plik masz na myśli. Zastosowanie częściowych pozwala nam na świetny sposób na modularyzację naszego kodu, dzięki czemu jest bardziej przenośny i łatwiejszy w utrzymaniu.
Sass przenosi funkcje na stronę CSS. Wiem, że nie wszyscy są programistami, a koncepcja funkcji może być odrobinę zbyteczna, ale nie martw się, wielu dodaje mnóstwo użytecznych funkcji, nie będąc zbytnio skomplikowanymi. Jeśli chodzi o kolory, jest kilka przydatnych do manipulowania nimi, ale trzy wyróżniają się jako niesamowite, łatwe do osiągnięcia dla ludzi dopiero zaczynających. Spójrzmy, jak z nich korzystamy.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
Składnia jest dość prosta. W powyższych trzech funkcjach widzimy dwa argumenty dla każdego. Pierwszy to kolor, którym chcemy manipulować. Może to być szesnastkowy, RGB lub dowolny format koloru, który jest prawidłowym CSS. Może nawet być zmienną. Druga to ilość, którą chcemy zmienić w tym kolorze. Zrób o 10% ciemniej, Rozjaśnij o 5%, Ustaw wartość alfa na 0.6. Wynikiem tej funkcji jest wartość ustawiona w skompilowanym pliku CSS. Poniżej widać nasze funkcje w pracy
//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}Mam nadzieję, że już wiesz, jak to może być przydatne. Istnieje kilkanaście sposobów wykorzystania tych trzech funkcji w celu dodania całkiem fajnego kontrastu kolorów i można ich używać wszędzie tam, gdzie normalnie byłaby wartość koloru. Te trzy to tylko wierzchołek góry lodowej. Istnieje wiele więcej funkcji kolorów i wiele sposobów kreatywnych mogą być używane.
Niektóre rzeczy w CSS są nieco nudne do napisania. Mixiny tworzą grupy deklaracji CSS, które możemy ponownie wykorzystać na naszej stronie. Style CSS3, które wymagają prefiksów dostawców, są doskonałym przykładem na to, kiedy używać mixina. Zamiast wpisywać tę samą właściwość w kółko, piszemy raz mixin, a następnie wywołujemy ten mixin w dowolnym momencie, kiedy chcemy go użyć. Aby zadeklarować mixin używamy @mixin słowo kluczowe. Następnie nadajemy mu nazwę i stosujemy nasze style między nawiasami klamrowymi, takimi jak: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Argumenty można nawet przekazać do mixin, aby był bardziej elastyczny. Aby skorzystać z naszego mixina, po prostu używamy @include słowo kluczowe.
//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
Jak widać w powyższym przykładzie, nazywamy nasze mixin z @include następnie nazwa mixin, a następnie wszelkie argumenty w nawiasie. Pomyśl, ile czasu to cię uratuje. Dlaczego nie wszyscy używają tego?
Te narzędzia były świetne, ale zachowałem najlepsze na koniec. @extend jest jedną z najbardziej przydatnych funkcji, która pozwala nam udostępniać zestaw właściwości CSS z jednego selektora do drugiego. Pomyśl o paru przyciskach, takich jak przycisk akceptowania i odrzucania w oknie modalnym. Ponieważ oba są przyciskami, prawdopodobnie będą miały ten sam styl, ale przycisk "Odrzuć" będzie miał czerwone tło, które sprawi, że się wyróżni. W Sass piszemy domyślne style dla wszystkich przycisków, a następnie "rozszerzamy" te style do przycisku spadku, w którym dodamy czerwone tło.
.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}Człowieku, jakie to wspaniałe, że nie musisz się powtarzać? Nie tylko promuje modularyzację naszych stylów, ale także zmniejsza ryzyko wyłączania stylów z przycisku na przycisk. To jest ogromna oszczędność czasu! Pomnóż to dla wszystkich stylów witryny i znacznie skróciliśmy ramy czasowe pisania CSS.
Heck, cały czas oszczędzamy może moglibyśmy nauczyć się bardziej złożonych aspektów Sass.
Mam nadzieję, że przekonałem Cię do zrobienia tego niesamowitego narzędzia i zilustrowałem kilka funkcji, które od razu poprawią Twoją produktywność. Prawdą jest, że mógłbym napisać ten artykuł ponownie jutro i mieć jeszcze pięć naprawdę fajnych funkcji do udostępnienia. To po prostu niesamowite! Sass (i inne preprocesory) są tu, aby pozostać, więc zrób sobie przysługę i zacznij z niego korzystać. Dla osób zainteresowanych zdobyciem dodatkowych informacji sprawdź te zasoby na Twitterze i w Internecie:
Twits:
Webs:
A jeśli jesteś w południowej części Florydy, w Trójmieście dołącz do nas South Florida Sass Meetup .