Jak zacząć od Sass

Sass. Jest to potężne narzędzie, które przynosi wiele funkcji z innych języków programowania do CSS - takich jak funkcje, zmienne i pętle - a także przynosząc własne intuicyjne cechy, takie jak miksy, zagnieżdżanie i częściowe, aby wymienić kilka.

W tym samouczku będziemy tworzyć ikony społeczne za pomocą pętli Sass, Mixins i Funkcje. Będziemy również korzystać z potężnego gniazda dostępnego w Sass.

• Co to jest Sass?

Będziemy stworzyć listę w Sass, aby wygenerować nasze ikony społeczne, które będzie składać się z nazwy klasy, pierwszy odniesienie do czcionki i koloru pierwszego - a później narzędzie.

I będziemy korzystać z MIXINS, aby utworzyć zapytania o media wielokrotnego użytku i tworzenie funkcji, aby przekształcić wartość pikseli w wartość EM. Aby to zrobić, będziemy również tworzyć zmienną dla naszego podstawowego rozmiaru czcionki.

Istnieje wiele sposobów zainstalowania i korzystania z Sass w zależności od systemu i Twoich potrzeb oprzyrządowania - więcej szczegółów można znaleźć tutaj - Jednak będziemy stosować Codepen, aby skompilować naszą Sass w CSS, aby utrzymać rzeczy tak proste, jak to możliwe.

Aby naprawdę wykorzystać moc Sass, a nie dostać się w bałagan specyficzności i złożonością wymagane jest solidne zrozumienie CSS. Szczególnym smakiem Sass będziemy używać to SCSS (Sassy CSS), co oznacza, że ​​nadal będziemy korzystać z nawiasów kręconych {} w naszym kodzie Sass.

Uzyskaj pliki samouczka

Aby pobrać przykładowe pliki dla tego samouczka, przejdź do Filesilo. , Wybierz darmowe rzeczy i bezpłatne treści obok samouczka. Uwaga: Pierwsze użytkownicy będą musieli zarejestrować, aby korzystać z plików.

01. Skonfiguruj CZAS CSS

Pierwszą rzeczą, którą musimy zrobić, to Utwórz nowe pióro I zmień niektóre domyślne ustawienia edytora CSS w Codepen. Zmienimy CSS Preprocessor do SCSS i włączyć normalizację i autoprefiter.

02. Zacznij pisać kod

Teraz wszystko ustawiliśmy, możemy zacząć pisać jakiś kod. Wewnątrz edytora HTML utworzymy kontenera i wiele elementów wewnątrz zawierających link i ikonę dla każdej z naszych ikon.

Użyte tutaj nazwy zostaną użyte w naszej listy Sass jako odniesienie do CSS. Będziemy również korzystać z konwencji nazewnictwa BEM dla naszych nazw klasy.

03. Ustaw podstawowe style

Przechodząc do edytora CSS, rozpoczniemy się przez włączenie czcionek - niesamowity, ustawienie zmiennej dla naszego podstawowego rozmiaru czcionki i niektórych podstawowych stylów dla strony.

 @import URL (http://srt.lt/w8yt8);
// zmienne.
$ base-font-size: 16px;
// Stylizacja podstawowa
ciało {
  Rozmiar czcionki: $ Base-Font-size;
  ...
} 

04. Utwórz podstawową funkcję

Następnie utworzymy podstawową funkcję, aby przekształcić wartość pikseli do wartości EM za pomocą naszej zmiennej "$ bazowej czcionki".

Funkcje w Sass są tworzone przy użyciu "@Function", a następnie nazwę funkcji i wprowadzania do wykonania funkcji.

Następnie w deklaracji używamy "@return", aby wyjść z wartości podczas korzystania z funkcji. "# {}" Otaczający obliczenia jest używane do interpolacja .

 // Funkcje
@Function px-to-em ($ piksels) {
@return # {$ Pixels / $ Base-Font-size} Em;
} 

05. Make MIXINS.

Kontynuując kontakt z naszą konfiguracją, stworzymy MIXINS do prostych zapytań Mobile-First Media Queries przy użyciu naszej funkcji "PX-To-Em", które przejdziemy w wartości PX, aby zwrócić wartość EM.

MIXINES są tworzone przy użyciu "@mixin", a następnie nazwę miksiny. Następnie wewnątrz Deklaracji używamy "@Content", aby wyjść z kodu umieściliśmy wewnątrz Mixin podczas dzwonienia do później w naszej CodziennejBasie.

 @mixin Viewsport - Duży {
  @media tylko ekran i
  (min-szerokość: px-to-em (1680px)) {
  @zawartość;
}}
@mixin viewport - medium {
  @media tylko ekran i
  (Min-szerokość: px-to-em (1080px)) {
  @zawartość;
}} 

06. Skonfiguruj listę Sass

Ostatnim krokiem w naszej konfiguracji jest utworzenie listy. Listy w Sass są tworzone za pomocą zmiennej; Potem dokładna składnia jest dość luźna, przyjmując szeroką gamę sposoby zdefiniowania go .

Wewnątrz zmiennej zdefiniujemy nazwę klasy, wartość Unicode i kolor dla każdej ikony, oddzielając je przecinkami, wewnątrz nawiasów.

 $ Icon-lista: (
  vimeo "f27d" # 1ab7ea,
  Twitter "F099" # 1DA1F2,
  ...
  Github "F113" # 333,
  RSS "F09E" # F26522
); 

07. Wyświetl swoje ikony z rzędu

Aby nasze ikony społeczne były wyświetlane w rzędzie dodamy kilka prostych CSS do każdego z ich pojemników.

 .Social__item {
  Wyświetlacz: blok inline;
  margines prawy: 0,05EM;
} 

08. Utwórz wspólny styl ikony

Aby zminimalizować ilość cyfr CSS, będziemy korzystać z selektora CSS3, aby znaleźć wszystkie zajęcia zaczynające się od "Ikona" i tworzyć dla nich styl wspólny.

 [Klasa ^ = "Icon"] {
  Czcionka: "Fontawesome";
  Mów: Brak;
  Styl czcionki: normalny;
  Czcionka: Normalna;
  Wariant czcionek: normalny;
  Transformacja tekstowa: Brak;
  Wysokość linii: 1;
  -Webkit-czcionki - wygładzanie: antialiased;
  -Moz-osx-czcionki-wygładzanie: szarość; } 

09. Styl Up Button Tła

Korzystając z tej samej metody, zrobimy to samo dla przycisków określających nasze wartości w "EM", pozwalając nam później zmienić ich zmianę ich za pomocą kontenera.

 [Klasa ^ = "Social__icon"] {
  rozmiar czcionki: 1em; Szerokość: 2em; Wysokość: 2em;
  kolor-kolor: # 333;
  kolor biały;
  Tekst dekoracji: Brak;
  Radius Border: 100%;
  Tekst-Wyrównuj: Centrum;
  Wyświetlacz: Flex;
  Wyrównuj przedmioty: Centrum;
  Justify-Content: Center;
} 

10. @each Loop na nasze ikony

Teraz mamy wszystkie nasze style bazowe, możemy korzystać z naszej listy, aby wygenerować CSS specyficzne dla każdej ikony.

Aby utworzyć pętlę w Sass, używamy "@each", a następnie nazwy dla każdej wartości każdego elementu - "$ Icon", "$ Unicode" i "$ Icon-background" - a następnie imię ", a następnie nazwa listy.

Wewnątrz pętli zastosujemy wartość "$ Unicode" do elementu pseudo "przed" każdej ikony stworzyliśmy w HTML, umożliwiając wspólnego stylu, które stworzyliśmy wcześniej, aby zadbać o wszystkie potrzebne inne style.

 @each $ Icon, $ Unicode, $ Icon-background
W $ Icon-List {
  .icon - # {$ Icon} {
  & amp ;: przed {
  Treść: $ Unicode;
  }
  }
} 

11. @each Loop dla naszych kolorów

Ikony są teraz działające, ale wciąż mamy kolor tła rozwijającego się. Dodamy więcej kodu do naszej listy, aby to naprawić. Korzystając z tej samej metody, jak powyżej Wyjdziemy nazwę "$ Icon", ale tym razem na klasach "Social__icon" i wewnątrz, że kolor "$ Icon-Background" kolor.

 @each $ Icon, $ Unicode, $ Icon-background
W $ Icon-List {
  ...
  .Social__icon - # {$ Icon} {
  Background-Color: $ Icon-Tło;
  }
} 

12. Użyj miksów

Korzystając z MIXINES, które stworzyliśmy wcześniej, a ponieważ stylizowaliśmy ikony za pomocą wartości "EM", możemy zastosować rozmiar czcionki do pojemnika i zwiększyć go za pomocą naszego miksiny zapytania do mediów za pomocą "@include" i nazwę miksiny, a następnie Kod chcemy włączyć w zapytanie o media.

 .Social__container {
  rozmiar czcionki: 1em;
  @inClude viewport - medium {
  Rozmiar czcionki: 1.5EM;
  }
  @inClude veveport - duże {
  rozmiar czcionki: 2em;
  }} 

13. Dodaj stany interakcji i funkcje wbudowane

Możemy dodać pewną interaktywność do naszych przycisków, zmieniając kolor tła, gdy przycisk jest interakcji z za pomocą myszy lub klawiatury.

Sass ma wiele Wbudowane funkcje kolorów Pozwalając nam wziąć kolor tła ustawiliśmy na naszej liście i wymieszamy go z czarnym, aby przyciemnić przycisk - po interakcji z.

 Ikona - # {$ Icon} {
  Background-Color: $ Icon-Tło;
  & amp;: Hover,
  & amp ;: focus,
  & amp;: aktywny {
  kolor tła:
  Mix (czarny, $ icon-background, 15%);
  }} 

14. Przejście kolor tła

Możemy również wykorzystać nieruchomość "przejściowej" w CSS, aby ożywić różnice między kolorami tła. Możemy użyć wartości "wszystkie", ale jest to zarówno drogie pod względem wydajności, jak i nie pozwalają nam przejść różnych wartości w różnych czasach i funkcjach czasowych.

 [Klasa ^ = "Social__icon"]{
  ...
  Przejście: kolor tła
  150 ms łatwość out
  ;
} 

15. Dodaj dalsze efekty przejścia

Dodając "względne" pozycjonowanie do przycisków i najwyższej wartości i dodawanie "góry" do naszej własności "przejściowej" możemy przygotować elementy do dalszej interakcji.

 [Klasa ^ = "Social__icon"] {
  Pozycja: krewna;
  Top: 0;
  ...
  Przejście: kolor tła
   150 ms łatwość out,
    Top 250ms Linear.
  ; } 

16. Przesuń przyciski po interakcji

W tym interakcji nie ma nic konkretnego, aby go utworzyć, dlatego możemy dodać kod do klasy wspólnej. Stosując negatywną wartość i usuwanie zarysu, mamy jeszcze wyraźniejszą wizualną pamięć interakcji.

 [Klasa ^ = "Social__icon"] {
  ...
  & amp;: Hover,
  & amp ;: focus,
  & amp;: aktywny {
  Zarys: Brak;
  Top: -0.25em;
  }} 

17. Dodaj cień

Możemy również użyć tej samej metody, aby utworzyć i animować "Box-Shadow" - dodając trochę więcej głębokości do interakcji - zmiana pionowej wysokości cienia w tym samym czasie co najważniejsza wartość.

 Box-Shadow:
  0 0 0,25EM -0.25EM RGBA (0,0,0,0.2);
& amp;: Hover,
& amp ;: focus,
& amp;: aktywny {
  ...
  Shadow Box:
  0 0.5EM 0,25EM -0.25EM RGBA (0,0,0,0.3);
} 

18. Dodaj narzędzia

Możemy łatwo dodawać witryny CSS, aby dodać dalszą przejrzystość dla naszych użytkowników. Pierwszą rzeczą, którą zrobimy, jest dodanie wartości podpowiedzi do listy. Upewnienie się, że piszę je w cytatach, aby w razie potrzeby zezwolić na zastosowanie spacji.

 $ Icon-lista: (
  vimeo "vimeo" "f27d" # 1ab7ea,
  Twitter "Twitter" "F099" # 1DA1F2,
  ...
  Github "Github" "F113" # 333,
  RSS "RSS" "F09E" # F26522,
); 

19. Zmodyfikuj pętlę @each

Ze względu na dodatek do naszej listy będziemy musieli zmodyfikować naszą pętlę "@each", aby uwzględnić wartość narzędzi ("$ nazwa"). Możemy następnie wyjść ta nazwa jako zawartość elementu "przed pseudo" na naszych przyciskach.

 @each $ Icon, $ Name, $ Unicode,
  $ icon-background in $ Icon-lista {
  ...
  .Social__icon - # {$ Icon} {
  ...
  & amp ;: przed {
  Treść: "# {$ Name} ';
  }
  }} 

20. Styl przed elementem pseudo

Teraz mamy nazwę każdego elementu wyświetlanego na ekranie, musimy stylować element, dodając kolor tła, wyściółki i inne elementy stylizacji - oraz pozycjonowanie elementu i gotowości go do przejść i modyfikowanie oddziaływania krycia i górnych od interakcji .

 & AMP; :: przed {...
  Top: -3.5em;
  nieprzezroczystość: 0;
  przejście:
  Top 250ms liniowy, krycie 150 ms liniowy 150 ms;
}
& Amp;: Hover, ... {...
  & amp ;: przed {
  nieprzezroczystość: 1;
  Top: -2.5em; }
} 

21. Styl po elemencie pseudo

Użyjemy CSS TRIANGLES. Aby utworzyć dno naszych podpowiedzi - ponownie pozycjonowanie elementu gotowego go do przejść - przez przejście na krycie i najważniejsze wartości w różnych czasach.

Dodając opóźnienie, dostajemy animację składającą się z blaknięcia i przesuwania na miejscu.

 & Amp; :: po {...
  Top: -1.9EM;
  nieprzezroczystość: 0;
  przejście:
  Top 250ms liniowy, krycie 150 ms liniowy 150 ms;
}
& Amp;: Hover, ... {...
  & amp; :: po {
  nieprzezroczystość: 1;
  Top: -0.9em; }
} 

Można znaleźć kolekcję kodeksu CodePeni tutaj .

Ten artykuł pierwotnie pojawił się w wydaniu magazynu projektanta Web Designer 264. Kupuj tutaj .

Czytaj więcej:

• Co to jest Sass?
• 8 Codepen Cechy, o których nie wiedziałeś
• 5 wskazówek dotyczących super szybkich CSS