Sass (niesamowite składniowo arkusze stylów) to rozszerzenie CSS o dodatkowe funkcje, które czynią go bardziej wydajnym. Najlepszą rzeczą w Sass jest jego kompatybilność z CSS, co oznacza, że możesz go używać w swoich projektach tworzenia stron internetowych z frameworkami JavaScript, takimi jak React.
Jednak w przeciwieństwie do standardowego CSS, potrzebujesz trochę konfiguracji, aby używać Sass. Dowiedz się, jak to działa, tworząc prosty projekt React.js i integrując z nim Sass.
Jak używać Sass w swoim projekcie React.js
Podobnie jak inne procesory CSS, Sass nie jest natywnie wspierany przez React. Aby korzystać z Sass w React, musisz zainstalować zależność innej firmy za pośrednictwem menedżera pakietów, takiego jak przędza lub npm.
Możesz sprawdzić, czy npm lub przędza jest zainstalowana na komputerze lokalnym, uruchamiając npm --wersja
Lub przędza -- wersja. Jeśli nie widzisz numeru wersji w swoim terminalu, zainstaluj np lub najpierw przędza.Utwórz projekt React.js
Aby postępować zgodnie z tym przewodnikiem, możesz skonfigurować prostą aplikację React.js za pomocą metody create-react-app.
Najpierw użyj wiersza poleceń, aby przejść do folderu, w którym chcesz utworzyć projekt React. Następnie uruchomić npx twórz-reaguj-aplikację . Po zakończeniu procesu wejdź do katalogu aplikacji za pomocą płyta CD . Dodaj następującą zawartość do swojego Aplikacja.js plik jako starter:
import Reagować z "reagować";
import "./App.scss";
funkcjonowaćAplikacja() {
powrót (
<div nazwa klasy ="obwoluta">
<h1>Używanie Sassa w React</h1>
<nazwa klasy nagłówka ="wrapper_btns">
<przycisk>niebieski przycisk</button>
<przycisk>Czerwony przycisk</button>
<przycisk>Zielony przycisk</button>
</header>
</div> );
}
eksportdomyślny Aplikacja;Po skonfigurowaniu podstawowego projektu React nadszedł czas na integrację Sass.
Zainstaluj Sassa
Możesz zainstalować Sass przez npm lub przędzę. Zainstaluj go za pomocą przędzy, uruchamiając przędza dodaje sass lub, jeśli wolisz npm, uruchom npm zainstaluj sass. Twój menedżer pakietów doda najnowszą wersję Sass do listy zależności w projekcie pakiet.json plik.
Zmień nazwę plików .css na .scss lub .sass
W folderze projektu zmień odpowiednio nazwy App.css i index.css na App.scss i index.scss.
Po zmianie nazw tych plików musisz zaktualizować importy w plikach App.js i index.js, aby odpowiadały nowym rozszerzeniom plików w następujący sposób:
import "./index.scss";
import "./App.scss";Od tego momentu powinieneś używać rozszerzenia .scss dla każdego tworzonego pliku stylu.
Importowanie i używanie zmiennych i domieszek
Jeden z najbardziej znaczących Zalety Sassa polega na tym, że pomaga pisać czyste, wielokrotnego użytku style przy użyciu zmiennych i domieszek. Chociaż może nie być oczywiste, jak możesz zrobić to samo w React, nie różni się to tak bardzo od używania Sassa w projektach napisanych za pomocą zwykłego JavaScript i HTML.
Najpierw utwórz nowy Style folder w twoim źródło teczka. W folderze Style utwórz dwa pliki: _zmienne.scss I _mixins.scss. Dodaj następujące reguły do pliku _variables.scss:
$kolor-tła: #f06292;
$tekst-kolor: #f1d3b3;
$btn-width: 120piks;
$btn-wysokość: 40piks;
$wypełnienie bloku: 60piks;I dodaj następujące elementy do pliku _mixins.scss:
@mixin lista pionowa {
wyświetlacz: elastyczny;
elementy wyrównania: środek;
kierunek zginania: kolumna;
}Następnie zaimportuj zmienne i miksy w App.scss w następujący sposób:
@import "./Style/zmienne";
@import "./Style/miksy";Użyj swoich zmiennych i miksów w pliku App.scss:
@import "./Style/zmienne.scss";
@import "./Style/miksy";
.obwoluta {
kolor-tła: $kolor-tła;
kolor: $kolor-tekstu;
dopełnienie: $wypełnienie blokowe;&__btns {
@włączać pionowy-lista;
przycisk {
szerokość: $btn-szerokość;
wysokość: $btn-wysokość;
}
}
}
W ten sposób używasz zmiennych i domieszek w React. Oprócz miksów i zmiennych, możesz także korzystać ze wszystkich innych niesamowitych funkcji Sass, takich jak funkcje. Nie ma ograniczeń.
Używanie Sassa w React.js
Sass zapewnia więcej funkcji niż CSS, czyli dokładnie to, czego potrzebujesz do napisania kodu CSS wielokrotnego użytku.
Możesz zacząć używać Sass w React, instalując pakiet sass przez npm lub Yarnę, aktualizując swoje pliki CSS do .scss lub .sass, a następnie aktualizując importowane pliki, aby używały nowego rozszerzenia pliku. Następnie możesz zacząć pisać SCSS w React.
