Co to jest Sass? Dowiedz się, jak korzystać z tego języka rozszerzeń CSS

Syntaktycznie niesamowite arkusze stylów (Sass) to popularny język rozszerzeń CSS. Język istnieje od około 15 lat. Działa dobrze z każdą wersją CSS, dzięki czemu jest kompatybilny z każdą biblioteką i frameworkiem CSS, od Bootstrap do Foundation.

Język umożliwia pisanie kodu Sass, a następnie kompilację tego kodu do CSS. Zaletą korzystania z Sass zamiast zwykłego CSS jest to, że zapewnia dodatkowe funkcje, które są obecnie poza zakresem CSS.

W tym samouczku dowiesz się, jak korzystać z Sassa i jego najważniejszych funkcji.

Instalowanie Sassa

Istnieje kilka sposobów korzystania z Sass na swoim urządzeniu. Obejmują one uruchamianie aplikacji (takich jak LiveReload lub Scout-App), pobieranie Sass z GitHublub zainstalowanie go przy użyciu npm.

Instalowanie Sassa z npm

Aby zainstalować Sassa za pomocą npm, musisz zainstaluj NodeJS i npm na Twoim urządzeniu. Następnie musisz utworzyć pakiet.json plik (co jest dobrą praktyką podczas instalowania dowolnego pakietu npm w swoich projektach). Możesz stworzyć podstawowy

pakiet.json plik w katalogu projektu za pomocą następującego polecenia terminala:

npm początek -y

Wykonanie tego polecenia wygeneruje plik package.json o następującej zawartości:

{
 "name": "moja_aplikacja",
 "wersja": "1.0.0",
 "opis": "",
 "main": "index.js",
 "skrypty": {
 "test": "echo \"Błąd: nie określono testu\" && wyjdź 1"
 },
 "słowa kluczowe": [],
 "autor": "",
 "licencja": "ISC"
}

ten pakiet.json plik jest ważny, ponieważ służy jako konfiguracja dla twojego projektu. Za każdym razem, gdy instalujesz nowy pakiet npm, pakiet.json plik będzie to odzwierciedlać.

Teraz możesz zainstalować Sass, wstawiając do terminala następujące polecenie:

npm zainstaluj sass

To polecenie zaktualizuje pakiet.json plik, tworząc nowy pole zależności, który będzie zawierał nowy pakiet Sass. Wygeneruje również nowy pakiet-lock.json plik i zainstaluj sass (plus zależności) do a node_modules informator.

Różne typy plików Sass

Plik Sass może mieć jedno z dwóch rozszerzeń, .sass lub .scss. Główna różnica między nimi polega na tym, że .scss plik używa nawiasów klamrowych i średników (podobnie jak CSS), podczas gdy .sass struktury plików CSS używający wcięć (podobnie jak Python). Niektórzy programiści wolą używać .scss plik, ponieważ jego struktura jest bliższa CSS.

Przykład pliku .scss

$kolor podstawowy: niebieski;
ciało {
 kolor: $kolor-podstawowy;
 P {
 kolor czerwony;
 }
}

Przykład pliku .sas

$kolor podstawowy: niebieski
ciało
 kolor: $podstawowy-kolor
 P
 kolor czerwony

Kompilacja pliku Sass do CSS

Możesz skompilować pojedynczy plik Sass za pomocą sass program wiersza poleceń:

sass plik.scss > plik.css

Możesz także uruchomić sassa we wszystkich plikach w określonym katalogu:

sass scss: dist/css/

To polecenie kompiluje wszystkie pliki Sass w obrębie scss katalogu i przechowuje powstałe pliki w dyst/css.

Jeśli używasz npm, możesz ustawić wygodny skrót do kompilacji sass za pomocą skrypty pole w twoim pakiet.json plik:

"skrypty": {
 "test": "echo \"Błąd: nie określono testu\" && exit 1",
 "sass": "sass --watch scss: dist/css/"
 },

Ta konfiguracja wykorzystuje --obserwować opcja. Utrzymuje działanie sass i zapewnia rekompilację tych plików za każdym razem, gdy ulegną zmianie. Dla każdego pliku sass wygeneruje .css i .css.mapa plik.

Aby wykonać powyższy skrypt Sass, musisz wykonać następujące polecenie w swoim terminalu:

npm run sass

Uruchomienie tego polecenia wygeneruje dane wyjściowe podobne do tego:

> [email protected] sass C:\Użytkownicy\kadeisha\Dokumenty\moja_aplikacja
> sass --oglądaj scss: dist/css/
Skompilowano scss\main.scss do dist\css\main.css.
Sass czeka na zmiany. Naciśnij Ctrl-C, aby zatrzymać.

Zmienne Sassa

Możesz tworzyć zmienne w CSS dzisiaj, ale 15 lat temu zmienne CSS nie istniały, więc wsparcie Sassa dla nich było cenne. Zmienne Sass działają w podobny sposób jak zmienne CSS. Przechowują wartości (takie jak kolory), których zamierzasz użyć w pliku CSS. Jedną z głównych zalet zmiennych jest to, że pozwalają aktualizować wiele wystąpień wartości, zmieniając ją tylko w jednym miejscu.

Każda zmienna Sass zaczyna się od znaku dolara, po którym następuje dowolna kombinacja znaków. Postaraj się, aby zmienne były opisowe, np. $kolor podstawowy przykład powyżej. Należy zauważyć, że zmienna Sass nie kompiluje się w zmienne CSS. Na przykład ten plik .scss:

$kolor podstawowy: niebieski;
ciało {
 kolor: $kolor-podstawowy;
}

Skompiluje się do następującego kodu CSS:

ciało {
 kolor niebieski;
}

Jak widać z powyższego pliku nie ma żadnych zmiennych CSS. Zaletą zmiennych jest to, że każda zmiana dokonana w pliku Sass zaktualizuje odpowiedni plik CSS.

Sass Mixins

Jeśli masz jedną właściwość, której chcesz użyć kilka razy w całym projekcie, zmienna jest świetna. Ale jeśli masz grupę właściwości, których chcesz użyć jako jednostki, mixin załatwi sprawę.

Każdy mixin zaczyna się od @miksuj słowo kluczowe, po którym następuje nazwa, którą chcesz przypisać do mixina. Masz możliwość przekazywania zmiennych do domieszki jako parametrów i używania tych zmiennych w treści domieszki, podobnie jak funkcji.

Korzystanie z miksera

@mixin light-theme($kolor-podstawowy: biały, $kolor-dodatkowy: #2c2c2c) {
 rodzina czcionek: „Franklin Gothic Medium”, „Arial Narrow”, Arial, bezszeryfowy;
 kolor tła: $ kolor podstawowy;
 kolor: $kolor-wtórny;
}
#Dom {
 @include jasny motyw (niebieski);
}

Pierwszą rzeczą, którą możesz zauważyć w powyższym kodzie, jest to, że mixin akceptuje dwa argumenty. Możesz przypisać wartości domyślne do argumentów i zastąpić je, gdy je dołączysz.

Po utworzeniu mixina możesz go używać w dowolnej sekcji na swojej stronie internetowej za pomocą @zawierać słowo kluczowe, po którym następuje nazwa mixina.

Kompilacja powyższego kodu Sass wygeneruje następujący kod CSS w pliku docelowym:

#Dom {
 rodzina czcionek: „Franklin Gothic Medium”, „Arial Narrow”, Arial, bezszeryfowy;
 kolor tła: niebieski;
 kolor: #2c2c2c;
}

Sasowe funkcje

Oprócz różnych słów kluczowych, główną różnicą między funkcją a domieszką jest to, że funkcja musi coś zwrócić. Możesz używać funkcji Sassa do obliczania wartości lub wykonywania operacji.

@function add-numbers($numer-jeden, $numer-dwa){
 $suma: 0;
 $suma: $liczba-jeden + $liczba-dwa;
 @zwróć $sumę 
}

Ta funkcja powyżej akceptuje dwie liczby i zwraca ich sumę. Funkcje Sass mogą nawet zawierać instrukcje if, pętle for i inne instrukcje przepływu sterowania.

Moduły Sassa

Gdybyś musiał umieścić wszystkie swoje zmienne, domieszki i funkcje w tym samym pliku, miałbyś ogromny plik Sass podczas tworzenia dużych aplikacji. Moduły umożliwiają dzielenie dużych plików na mniejsze, które sass łączą podczas kompilacji. Na przykład możesz mieć moduł funkcyjny i moduł mixin, wszystko, o czym musisz pamiętać, to @stosowanie słowo kluczowe.

Oto przykład pokazujący, jak możesz oddzielić poprzedni mixin do własnego pliku:

Plik mixins.scss

@mixin light-theme($kolor-podstawowy: biały, $kolor-dodatkowy: #2c2c2c) {
 rodzina czcionek: „Franklin Gothic Medium”, „Arial Narrow”, Arial, bezszeryfowy;
 kolor tła: $ kolor podstawowy;
 kolor: $kolor-wtórny;
}

Główny plik.scss

@użyj 'domieszek';
#Dom{
 @include mixins.light-theme;
}

Aby zaimportować i użyć zewnętrznego pliku jako modułu, musisz użyć @stosowanie słowo kluczowe, aby go zaimportować. Następnie, aby użyć konkretnego domieszki z importowanego pliku, poprzedź nazwę konkretnego domieszki nazwą pliku, po której następuje kropka. Kompilacja powyższych plików wygeneruje następujący kod CSS:

#Dom {
 rodzina czcionek: „Franklin Gothic Medium”, „Arial Narrow”, Arial, bezszeryfowy;
 kolor tła: biały;
 kolor: #2c2c2c;
}

Użyj Sass, aby rozszerzyć i uporządkować swój CSS

Sass jest rozszerzeniem składni CSS. Pozwala usprawnić arkusze stylów i efektywniej nimi zarządzać. Ale nadal musisz znać CSS i zasady projektowania stron internetowych, aby tworzyć skuteczne projekty.

Z tego artykułu dowiesz się, jak zainstalować i używać Sassa. Nauczyłeś się tworzyć zmienne, mixiny, funkcje i moduły Sassa. Teraz wystarczy, że utworzysz dokument HTML i zobaczysz, jak Twój kod Sass ożywa.

8 podstawowych wskazówek i sztuczek CSS, które powinien znać każdy programista

Czytaj dalej

O autorze