Być może słyszałeś o preprocessingu CSS i zastanawiasz się, o co w tym wszystkim chodzi. Być może nawet słyszałeś Sass lub MNIEJ .
Krótko mówiąc, wstępne przetwarzanie kodu CSS umożliwia pisanie bardziej zwięzłych arkuszy stylów, które są ładnie sformatowane i wymagają mniej powtarzalnych technik powszechnie stosowanych podczas pisania kodu CSS. Rezultatem jest bardziej dynamiczna stylistyka i mnóstwo czasu zaoszczędzonego podczas tworzenia stron internetowych lub aplikacji.
Jeśli już piszesz CSS, możesz łatwo nauczyć się preprocesować swój CSS. Gdy zrozumiesz zakres Sass, będziesz się zastanawiać, dlaczego wcześniej nie przeszedłeś.
Sass wygląda podobnie do CSS, ale po nurkowaniu ma wyraźne różnice. Istnieją dwa sposoby pisania Sassa i ostatecznie zależy od Ciebie, który styl chcesz. Używam stylu wciętego i nawiasem klamrowym (.scss) w moich projektach, ponieważ lubię naprawdę wizualizować, gdzie kończy się blok i zaczyna się, gdy dużo kodu zostanie zagnieżdżone. Po przetworzeniu kod Sass kompiluje się do tradycyjnego CSS automatycznie za pomocą silnika przetwarzania wstępnego.
Dostępnych jest wiele aplikacji, które umożliwiają wstępne kompilowanie Sassa w sposób prosty i bezproblemowy. Aby zainstalować, możesz użyć wiersza poleceń, dopóki masz zainstalowaną na komputerze Ruby. Jeśli nie czujesz się komfortowo z linią poleceń, są inne opcje (więcej na ten temat poniżej) i jeśli to już koniec twojej wizyty, odwiedź stronę Sass-lang.com, aby dowiedzieć się, jak to zrobić w łatwym formacie krok po kroku. Na koniec, używając dowolnej metody, niezależnie od tego, czy jest to linia poleceń czy aplikacja, instalacja Sass będzie obserwować twoje zmiany i automatycznie kompilować do tradycyjnego CSS.
Gorąco polecam korzystanie z aplikacji takich jak Codekit , LiveReload , lub Mieszanina które pomogą Ci skonfigurować projekt Sass na komputerze Mac od podstaw lub jeśli jesteś użytkownikiem Windowsa, który polecam PrePros . Codekit, mój wybór preprocesora, pomaga mi przez wstępne przetwarzanie mojego Sassa, a także sprawdzenie i zminimalizowanie kodu, aby Twoja strona działała szybko i efektywnie. (Możliwość tworzenia Kompas lub Burbon projekty oparte na Codekit to także niesamowita funkcja, ale wykracza to poza ramy tego artykułu.) Po bardziej komfortowym korzystaniu z Sassu koniecznie sprawdź, jak używać Compass i Bourbon w swoich projektach Sass.
Sass oznacza Syntactically Awesome Stylesheets i został stworzony przez Hampton Catlin . Sass wprowadza nowe pojęcia, takie jak zmienne, mixiny i zagnieżdżanie w kodzie CSS, który już znasz i kochasz. Te koncepcje sprawiają, że Twój CSS jest niesamowity, łatwiejszy w pisaniu i bardziej dynamiczny. Wszystkie te funkcje połączone, przyspieszenie przepływu pracy każdego projektanta lub programisty.
To, co często myli ludzi, to alternatywne sposoby pisania Sassa. Zobaczysz inne samouczki lub objaśnienia Sassa przy użyciu rozszerzenia .SCSS lub .Sass dla swoich plików Sass. Jest to oczywiste, ponieważ istnieją dwa sposoby zapisu kodu, który wytwarza ten sam wynik. Najczęściej spotykany, a metoda, której obecnie używam, jest wersją nawiasową znaną jako .SCSS. Inną metodą jest rozszerzenie .Sass, które opiera się bardziej na wcięciu niż na elementach punktowych i jest zależne od białych znaków. Przy takiej składni nie ma potrzeby stosowania średników lub nawiasów, co widać w CSS i składni .SCSS.
Sprawdź przykład poniżej.
#container {width:960px;margin:0 auto;}#container p {color: black;}/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$blackOkej, więc prawdopodobnie zastanawiasz się, jak przygotować Sass do własnych projektów. Proces ten jest dość łatwy, szczególnie jeśli używasz Codekit lub podobnej aplikacji, aby pomóc Ci po drodze.
Typowa struktura plików projektu Sass wygląda jak poniżej. Może to wyglądać zniechęcająco, ale obiecuję, że twój przepływ pracy ulegnie poprawie, gdy obejrzysz głowę, jak działają razem. W końcu cały twój Sass zostanie skompilowany do jednego pliku CSS, który będzie plikiem, który zawrzesz w swoich dokumentach roboczych, np. HTML, PHP itp.
stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.Sposób, w jaki ustalasz swoją strukturę ostatecznie zależy od Ciebie. Zacznij od podstawowej struktury i dostosuj się do własnych potrzeb i przepływu pracy.
Sass rozszerza regułę CSS @import, aby umożliwić importowanie plików Sass i SCSS. Wszystkie importowane pliki są scalane w jeden wyjściowy plik CSS. Dodatkowo wszelkie zmienne lub mixiny zdefiniowane w importowanych plikach przenoszą się do głównego pliku, co oznacza, że możesz wirtualnie zmiksować i dopasować dowolny plik i mieć pewność, że wszystkie style pozostaną na poziomie globalnym.
@import pobiera nazwę pliku do zaimportowania. W ostateczności pliki Sass lub SCSS zostaną zaimportowane poprzez wybraną przez ciebie nazwę pliku. Jeśli nie ma rozszerzenia, Sass spróbuje znaleźć plik o tej nazwie i rozszerzeniu .scss lub .Sass i zaimportować go.
Jeśli masz typową konfigurację projektu Sass, zauważysz pewne reguły @import w pliku bazowym. To po prostu pozwala mieć wiele plików, które są synchronizowane efektywnie po ich skompilowaniu, na przykład:
@import "main.scss";lub:
@import "main";@PartialsJeśli masz plik SCSS lub Sass, który chcesz zaimportować, ale nie możesz go skompilować do CSS, możesz dodać znak podkreślenia na początku nazwy pliku, który jest nazywany Częściowym. Podczas kompilacji kodu Sass zignoruje częściowe podczas przetwarzania na CSS. Na przykład możesz mieć _buttons.scss, nie zostanie utworzony plik _buttons.css i możesz wtedy "zaimportować" przyciski ";
Najlepszą praktyką jest utworzenie katalogu partials i umieszczenie w nim wszystkich częściowych plików Sass. Dzięki temu nie będziesz mieć żadnych duplikatów nazw plików, których Sass nie pozwoli, na przykład częściowe _buttons.scss i pliki file.scss nie mogą istnieć w tym samym katalogu. Korzystanie z częściowych jest świetnym sposobem na utrzymanie porządku na poziomie globalnym. Tak długo, jak @ importujesz plik, napisany przez ciebie napis Sass jest użyteczny w całym projekcie. Zazwyczaj w ramach częściowych tworzę mixiny lub zmienne do wykorzystania w całym moim projekcie. Nazywam je na podstawie ich zawartości i elementów, które stylizują.
Zmienne w CSS to przełom w nowoczesnym tworzeniu stron internetowych. Dzięki Sass możesz tworzyć zmienne dla takich rzeczy jak czcionki, kolory, rozmiary, marginesy, wypełnienia itp. Lista jest nieskończona. Jeśli piszesz JavaScript lub PHP, koncepcja jest dość podobna, jeśli chodzi o definiowanie zmiennych i konwencji.
Dlaczego więc używać zmiennych? Proste, zmienne pozwalają na użycie elementu więcej niż jeden raz, podobnie jak klasa w HTML lub zmienna w JavaScript. Załóżmy na przykład, że definiujesz wiele elementów div z określonym kolorem tła. Możesz użyć zmiennej, która jest łatwiejsza do zapamiętania zamiast tradycyjnego kodu szesnastkowego lub kalkulacji RGB. Tworzenie zmiennej z łatwą do zapamiętania nazwą pozwala na mniejsze kopiowanie i wklejanie oraz bardziej produktywny przepływ pracy. Ta sama koncepcja ma zastosowanie zawsze, gdy zmienna może zostać zaimplementowana, oraz z Sass, która jest praktycznie wszędzie, na przykład ta .scss:
#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}spowoduje powstanie tego pliku .css:
#container {font-size: 12px;padding: 10px;color: #C0392B;}Chłodną częścią dotyczącą zmiennych jest to, że są one bardzo podobne do używanych w językach skryptowych. Zmienne wewnątrz Sass mogą być używane wewnątrz operacji i funkcji. Standardowe operacje matematyczne (+, -, *, / i%) są obsługiwane dla liczb. W przypadku kolorów istnieją funkcje wbudowane w Sass, które celują w jasność, odcień, nasycenie i więcej.
Dzięki tej funkcjonalności Twój kod jest bardziej dynamiczny niż kiedykolwiek. Na przykład, jeśli chcesz zmienić ogólny kolor łącza witryny, możesz po prostu zmienić zmienną, ponownie skompilować, a witryna będzie dynamicznie aktualizować się w całym tekście. Sprawdź inny przykład poniżej, aby wyświetlić listę wielokrotnego użytku, czyli .scss:
nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);} }} spowoduje to .css:
nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}Zagnieżdżanie jest ogromnym powodem, dla którego kocham Sassa. Napisałeś mniej linii kodu na końcu, a cały twój kod jest łatwy do odczytania ze względu na zagnieżdżone formatowanie. (Ta sama koncepcja zagnieżdżania znajduje się również w LESS.)
Istnieją dwa typy zagnieżdżania:
Zagnieżdżanie selektorów w Sass jest podobne do zagnieżdżania HTML:
Main Content
Sidebar Content
Zagnieżdżanie wersji Sassa:
#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}spowoduje następujące CSS:
#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}Drugi typ zagnieżdżania to zagnieżdżanie właściwości. Można zagnieżdżać właściwości z tym samym prefiksem, aby lepiej kierować elementy, co skutkuje mniejszymi liniami kodu, na przykład:
#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}spowodowałoby ten CSS:
#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}Ze wszystkich funkcji Sassa Mixiny muszą być najpotężniejsze. Mieszanki są podobne do zmiennych, ale na sterydach. Możesz zdefiniować pełny styl elementu i ponownie użyć tych stylów w całym projekcie.
Mixiny definiuje się za pomocą dyrektywy @mixin , która przyjmuje blok stylów utworzonych wcześniej i stosuje go do wybranego przez ciebie selektora za pomocą dyrektywy @include . Poniżej znajduje się popularny wzorzec CSS służący do tworzenia poziomego menu nawigacyjnego. Zamiast pisać ten sam kod dla każdej instancji nawigacyjnej, po prostu użyj mixina, a następnie dołącz go tam, gdzie to konieczne. Ta koncepcja może być wykonana dla wszystkiego, czego używasz w kółko, takich jak przyciski, typografia, gradienty itp ...
/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}Tutaj dołączamy mixin z jedną linią kodu:
ul.navbar {@include navigate;}co skutkuje tym skompilowanym CSS:
ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}Możesz nawet posunąć się do tworzenia dostosowywanych mixin, które używają argumentów do dynamicznej aktualizacji. Do tego możesz dodać mixiny w innych mixinach lub tworzyć funkcje za pomocą mixin i więcej. Moc stojąca za nimi jest absolutnie ogromna.
Istnieje kilka popularnych wcześniej zdefiniowanych kolekcji mixin, w których wspomniałem wcześniej o nazwie Compass i Bourbon. Za pomocą prostego @importu w projekcie możesz mieć dostęp do już wygenerowanych mixinów powszechnie używanych w sieci. Jest tak wiele opcji, że trudno jest objąć wszystko dostępne, ale z pewnością zabawnie jest eksperymentować i zabrudzić sobie ręce, tworząc niestandardowe animacje lub przejścia z kilkoma liniami kodu, a nie z pełnym ekranem. Mixins sprawiają, że tworzenie wielu przeglądarek jest bardzo prosta, jeśli nie masz ochoty na wpisywanie przedrostków zdefiniowanych w przeglądarce w CSS.
Na przykład tutaj tworzymy mixin z argumentami pozwalającymi na dostosowanie.
@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }co daje nam ten CSS podczas kompilacji:
p {border-color: blue;border-width: lin;border-style: dashed;}Podczas gdy Sass ma krzywą uczenia się, naprawdę wierzę, że gdy zrozumiesz metody i składnię, nigdy nie będziesz chciał powrócić do pisania standardowego CSS ponownie.
Sass jest niesamowicie potężny i omówiłem tutaj tylko podstawy. Dzięki tradycyjnym CSS wszyscy spotkaliśmy się z kopiowaniem i wklejaniem lub znajdowaniem i zastępowaniem zadań, które tracą tak dużo czasu na etapie projektowania twojego projektu. Daj Sassowi szansę i dowiedz się, jak zbudować efektywny przepływ pracy w swoich przyszłych projektach.
Czy używasz Sassa, czy preferujesz inny preprocesor CSS? Czy masz ulubiony mixin? Daj nam znać w komentarzach.
Wyróżnione zdjęcie / miniatura używa zero do obrazu bohatera przez Shutterstock.