Styl witryny za pomocą Sass

Możesz zrobić dużo z CSS - być może więcej niż możesz pomyśleć - ale językowy język arkusza styl ma swoje ograniczenia. W nowoczesnym projekcie internetowym, z modułami NPM, ramami JavaScript, ES6 i więcej, może czuć się nieco anachronistycznie, aby wrócić do pisania wanilii CSS.

Na szczęście istnieją opcje, które umożliwiają korzystanie z innych języków, które kompilują się do CSS. Odnosi się do "preprocesorów", te narzędzia integrują się z procesem budowy sieci web i generują nadużycie stylów z dowolnego wybranego języka rozszerzenia.

Sass (Syntactally Awesome Style Arkusze) jest jednym z najbardziej popularnych z tych opcji - czytaj więcej z naszym przewodnikiem Co to jest Sass? Sass dodaje wielu cennych funkcji językowych, które nie są (obecnie) dostępne w CSS, aby pomóc w utworzeniu witryn i aplikacji bardziej utrzymujących. Obejmują one takie rzeczy, takie jak miksy i dyrektywy kontrolne, które brzmią zniechęcające, ale są w rzeczywistości dość proste, a my zajmiemy się tym w tym samouczku. Jeśli chcesz, aby rzeczywiście były prostsze, możesz używać Kreator strony internetowej .

• Fajne animacje CSS do odtworzenia

W rzeczywistości istnieją dwie różne składni dla Sass, które wykorzystuje rozszerzenie pliku .Scss i jeden, który używa .Sass. Pierwszy wygląda bardziej jak CSS (w rzeczywistości wszystkie pliki .CSS są poprawne pliki .Scss), podczas gdy te ostatnie eliminuje wsporniki CSS i średniki na rzecz wcięcia i Newlines. Skupimy się na .Scss, ale wybór jest po prostu do indywidualnych preferencji. Aktualizacja swojej witryny? Upewnij się hosting Obsługa robi to, do czego potrzebujesz, i zdobądź swoje magazyn w chmurze Równie.

Pobierz pliki do tego samouczka tutaj (wydanie 282)

01. Ustaw kompilator

Używanie Sass zasadniczo wymaga kompilatora. Najprostszym sposobem na to byłoby w wierszu poleceń. Możesz to zrobić za pomocą homebrew. Kompilator Sass jest realizowany w kilku różnych językach, a homebrew zainstaluje wersję DART, która jest szybka.

brew install sass/sass/sass

02. Utwórz plik Sass

Spróbujmy stworzyć prosty plik Sass, aby zobaczyć kompilator w akcji. Jedną z najprostszych koncepcji w Sass to zmienne, które można określić raz za pomocą $ prefiks, a następnie używany przez cały kod. Stworzymy Sass-wejście.Scss. .

 $ Tekst-Color: #CCCCCC;
ciało {
    kolor: $ kolorowy kolor;
} 

03. Kompilacja linii poleceń

Teraz możemy uruchomić kompilator Sass w wierszu poleceń, aby przekonwertować plik .Scss do wyjścia CSS. Zauważysz w pliku wyjściowym, które zniknęły zmienne i pozostawiamy ze standardową składnią CSS, która jest używana przez przeglądarkę.

 Sass Sass-Input.SCSS CSS-Output.CSS 

04. Automatyzuj swoją budowę

Jest to świetne, ale nie chcesz ręcznie uruchomić kompilatora Sass za każdym razem, gdy wprowadzasz zmiany. Jedną z opcji jest, aby słuchać zmian w plikach w katalogu i automatycznie zmienić wyjście do innego katalogu (zachowanie nazw plików). To również skutecznie pozwala segregować swój źródłowy plik z twoich wybudowanych CSS.

 MKDIR SRC
MKDIR SRC / SASS
MKDIR Public.
MKDIR Public / CSS
Sass --watch SRC / SASS /: Public / CSS /

05. Graj z Sass Styling

Teraz spójrzmy na prostą stronę startową, którą możemy użyć do gry z Sass Styling. Możemy zacząć, klonując niestrągłe przykładowe miejsce. Kluczem do notatki jest to, że nasza strona HTML nic nie zna nic o Sass. Posiada pojedynczy punkt wejścia pliku CSS, który stworzymy następny.

 CD Public
curl -o index.html https: // surowy.
githubusercontent.com/simon-a-j/sass-
instruktaż/
Master / Public / index.html 

06. Główny arkusz stylów

Używamy stylów.css jako naszego głównego punktu wejścia CSS, który później będziemy używać do importowania innych modułów. Oznacza to, że musimy powiedzieć Sassowi, aby wygenerować ten plik, więc musimy również utworzyć plik style.Scss w naszym folderze SRC / Sass. Jeśli biegasz Sass --watch. Jak poprzednio, zostanie to automatycznie skompilowane do CSS w publiczne / css. Folder i odświeżanie witryny pokaże jego zmiany. Spróbuj dokonywać modyfikacji i odświeżania strony HTML w przeglądarce, gdy idziesz.

 // style.scss
ciało {
  Czcionka: Sans-Serif;
  Tekst-Wyrównuj: Centrum;
}

07. Zarządzaj schematem kolorów

Spójrzmy na to, jak Sass może pomóc nam zarządzać schematem kolorów na stronie. Wspólny jest paleta pięciu lub sześciu kolorów dla strony internetowej. Możemy je znaleźć _Colours.scss. . Prefiks podkreślenia podkreśla Sass, aby nie skompilować tego do nowego pliku HTML ("częściową"). Ale możemy go używać w nieco inny sposób.

 // _Colours.scsss
$ Color-Podstawowy: # 231651;
$ Color-Detalary: # 2374AB;
$ Color-Light: # D6FFF6;
$ Color-Highlight1: # 4DCCBD;
$ Color-Highlight2: # FF8484;

08. Użyj zmiennych kolorów

Aby użyć tych zmiennych kolorów właśnie skonfigurowaliśmy, możemy powiedzieć Sass do importowania treści _Colours.scss. do naszego głównego arkusza stylów. Robimy to za pomocą @import komunikat. Po tym, powiadom, w jaki sposób zmienne są rozwiązane w pliku wyjściowego CSS.

 // style.scss
@import "_Colours.scss";
ciało {
  Czcionka: Sans-Serif;
  Tekst-Wyrównuj: Centrum;
  tło: gradient liniowy (155deg,
$-Color-Primary 70%, $ kolor-wtórny
70%);
  Kolor: $ Color-Light;
  Min-wysokość: 100VH;
}
h1 {
    Kolor: $ Color-Highlight1;
}
h2 {
  Kolor: $ Color-Highlight2;
}

09. Style Nest

Inną przydatną cechą Sass jest możliwość gniazda stylów. Oznacza to, że można określić styl dla elementu, który jest stosowany tylko wtedy, gdy element występuje w elemencie macierzystym. Wykorzystajmy to, aby rozróżnić naszą stylistykę linków, w zależności od tego, czy pojawiają się w nagłówku lub korpusie.

 A {
  kolor: $ kolor-wtórny;
}
.profile-header {
  {
    Rozmiar czcionki: 16px;
    Marginet-left: 10px;
    margines prawy: 10px;
    Wyściółka: 10px;
    Border-Radius: 5px;
    Kolor: $ Color-Light;
    Tło-kolor: $ kolor-wtórny;
  }
}

10. Robić elastyczną sieć

Teraz zorganizujmy nasze treści w responsywny format siatki. Sass ma kilka funkcji, aby to znacznie łatwiejsze do zarządzania. Jak również używać zmiennych, aby określić nasze punkty przerwania, możemy się gnić @głoska bezdźwięczna Zapytania w innych stylach, które sprawiają, że zachowanie specyficzne dla rozmiaru ekranu jest znacznie bardziej czytelny.

 $ BreakPoint: 800px;
.profile-ciało {
  Wyświetlacz: Flex;
  Wyrównuj elementy: Stretch;
  usprawiedliwiony-treści: przestrzeń;
  Margin-Top: 32px;
  Marginet-left: 10vw;
  margines prawy: 10vw;
  Ekran @Media i (maksymalna szerokość:
$ breakpoint) {
      Kierunek Flex: Kolumna;
  }
}
.profile-sekcja {
  Background-Color: $ Color-Highlight1;
  kolor: $ kolorowy;
  Margines: 16px;
  Radius Border: 10px;
  Szerokość: 340px;
  .profile-content {
    Wyściółka: 20px;
  }
  Ekran @Media i (maksymalna szerokość:
$ breakpoint) {
    Szerokość: 100%;
  }
}

11. Wprowadź MIXINS.

MIXINS to kolejna potężna funkcja Sass, którą można wymyślić jako sposób na definiowanie funkcji arkuszy stylów wielokrotnego użytku. Miksin jest zdefiniowany raz, może przyjmować parametry, a następnie można je wywołać w dowolnym miejscu w kodzie Sass. Jedna sprawa do użytku dla tego jest obsłużenie prefiksu dostawcy. Jeśli chcemy, aby CSS transformuje się do pracy w starszych przeglądarkach, może to wymagać -Webkit. prefiks dla chromu i safari na przykład. Zdefiniujmy mixin, który dba o to dla nas.

12. Mixins and zmienne

Możemy również użyć miksera z wieloma parametrami, w połączeniu z niektórymi zmiennymi, które definiujemy, do bardziej elegancko stylizacji różnych części strony. Jeśli stworzymy miksin, który definiuje kolor pierwszego planu i tła, umożliwi to wybieranie wyglądu różnych sekcji z skończonej listy zmiennych stylów.

 $ Style1: (pierwszy plan: $ Color-Light,
Tło: $ kolor-dodatkowy);
$ Style2: (pierwszy plan: $ Color-Primary,
Tło: $ Color-Highlight1);
$ Style3: (pierwszy plan: $ Color-Primary,
Tło: $ Color-Highlight2);
@mixin Content-Style (Nal plan,
$ tło) {
  Kolor: $ pierwszego planu;
  Tło-kolor: $ tło;
} 

13. Użyj nowego miksera

 .profile-header {
  {
    @include Content-Style ($ Style1 ...);
    // ...
  }
}
.profile-sekcja {
    @inClude Content-Style ($ Style2 ...);
  // ...
}

14. Zrozumienie dziedziczenia

Kolejną bardzo wydajną cechą Sass jest dziedzictwo. W tej chwili mamy dwa różne style do linków na naszej stronie. Jeśli chcemy użyć wspólnych stylów w obu, a nie kopiowaniu i wklejaniu CSS, dlaczego nie używamy klasy zastępczej, oznaczonych "%", które można rozszerzyć zarówno przez oba, co pozwala im odziedziczyć swoje style?

% współdzielony przez link {
  Rozmiar czcionki: 16px;
  Marginet-left: 10px;
  margines prawy: 10px;
  Wyściółka: 10px;
  Radius Border: 10px;
}

15. Rozszerz klasy

Teraz możemy rozszerzyć klasę współdzieloną łączącą, aby zdefiniować styl linii w całej naszej stronie. To zaczyna wyglądać dość elegancko. Definiujemy, co łączy się na ogół, jak tylko raz, ponowne wykorzystanie go przez cały czas i określa kolory z palety dla każdego łącza za pomocą miksiny.

 .profile-header {
  {
    @extend% Link-Shared;
    @include Content-Style ($ Style1 ...);
  }
}
{
  @extend% Link-Shared;
  @inClude Content-Style ($ Style3 ...);
}

16. Zmodyfikuj motyw

Teraz spójrzmy na to, jak łatwo jest zmodyfikować motyw naszej witryny. Obecne kolory mogą nie być idealne. Nie możemy modyfikować zmiennych kolorów, ale możemy również użyć niektórych funkcji Sass do proceduralnego generowania kolorów, które pasują do pierwotnego wyboru.

 // _Colours.scsss
$ Color-Podstawowy: # 2E1F27;
$ Color-Secondary: Lighten ($ Color-Primary,
25%);
$ Color-Light: Lighten ($ Color-Primary,
75%);
$ Color-Highlight1:
Lighten (uzupełnienie ($ Color-Primary), 50%);
$ Color-Highlight2:
rozjaśnić (uzupełnienie ($ kolor-dodatkowy), 50%);

17. Wybierz nowy zestaw kolorów

Teraz możemy zmodyfikować cały schemat kolorów dla witryny po prostu określając nową wartość podstawową w kolorze w _Colours.scss. plik. Daj próbować eksperymentować z alternatywnymi kolorami. Moglibyśmy również mieć Losy Sass (ale pamiętaj, że odnosi się to do punktu, w którym twoja witryna jest zbudowana, a nie Runtime). Możesz również spróbować dostosować logikę, której używamy do uzyskania innych kolorów w temacie z pierwotnego.

 $ Red: Random (255);
$ zielony: losowy (255);
$ niebieski: losowy (255);
$ Color-Primary: RGB ($ Red, $ Green, $ Blue); 

18. Użyj bibliotek

System Moduł Sass jest również bardzo prosty, aby korzystać z bibliotek osób trzecich przy minimalnym wysiłku i bez wysyłania dużych plików wykonawczych do użytkowników końcowych. Wypróbujmy bibliotekę Kołowrotek krawędzi, które możemy użyć do tworzenia opadłych krawędzi dla obiektów na naszej stronie.

 Git Clone https://github.com/josephfusco/
Angled-Edges.Git SRC / Sass / Angled-Edge

19. Kątowe krawędzie mixin

Możemy importować kątowe krawędzie w taki sam sposób, jaki zrobiliśmy na naszym schemacie kolorystycznym częściowym. Jest wtedy użyteczny przez miksin, który statki biblioteki. Spróbujmy go w naszej klasie sekcji profilu.

 @import "Angled-Edges / _angled-Edges.Scss";
.profile-sekcja {
  @inClude kminek ("na zewnątrz dolny",
"Dolny prawy", $ Color-Highlight1);
  @include kminki ("na zewnątrz top",
"Górny prawy", $ Color-Highlight1);
  Margines: 120px 16px 120px 16px;
  // ...
}

20. Formatowanie wyjściowe

Spójrzmy, patrząc na wyjście Sass Generuje. Jeśli śledziłeś pliki CSS, ponieważ dokonaliśmy zmian, zauważysz, że pozostają dość czytelne. Można jednak również zatrzymać skondensowane CSS, który jest mniej czytelny dla człowieka, ale nadal gotowy do wysyłki. Możesz to zrobić za pomocą --styl Flaga linii poleceń.

 Sass SRC / SASS /: Public / CSS / --style
Skompresowany 

21. Więcej Sass.

Obecnie zbadaliśmy sporo funkcji Sass, a nasza strona nie wygląda zbyt źle. Mam nadzieję, że zaczynasz widzieć, jak Sass pomaga nam opracować bardziej utrzymujące arkusze stylów. Nie uwzględniliśmy każdej funkcji języka - istnieje znacznie więcej przydatnych funkcji, a zaawansowane funkcje oraz zaawansowane funkcje, takie jak dyrektywy kontrolne (takie jak @gdyby , @dla i @podczas ) Często używane do tworzenia kompleksowych funkcji biblioteki. Ogólnie rzecz biorąc, pamiętaj, że Sass jest całkowicie stylistyczną preferencją. Możesz zrobić wszystko, co widzimy czystym CSS, jeśli chcesz, ale zdecydowanie powinieneś pomyśleć o wstępnie przetwarzaniu, ponieważ twoja praca staje się bardziej złożona.

Ten artykuł został pierwotnie opublikowany w wydaniu 282 z Projektant stron internetowych . Kup wydać 282. lub Subskrybuj tutaj .

Czytaj więcej:

• 10 Niesamowite nowe technologie CSS
• 3 Błyszczące nowe właściwości CSS, aby spróbować dziś
• Świetna paralaksy przewijania stron internetowych