@import i częściowe w SASS | Wyjaśnione

SASS Acronim dla składniowego niesamowitego arkusza Stylesheet jest przedprocesorem i rozszerzeniem CSS, który jest znany z czystych i czytelnych plików kodu, które w rezultacie zwiększają możliwość podstawowego języka CSS Language. SASS pozwala pisać suchy (nie powtarzaj się) kod CSS poprzez użycie zasady @import. Czym jest ta zasada i robi w SASS wraz z częściami w SASS, są przedmiotami omawianymi w tym artykule.

Jaka jest reguła @import w sass

Podobnie jak CSS, SASS obsługuje również dyrektywę @Import, która umożliwia włączenie jednego arkusza stylów do drugiego. Jako rozszerzenie reguły CSS @Import, reguła SASS @Import umożliwia importowanie .sass i .Pliki SCSS. Ponadto, jeśli importujesz jeden arkusz stylów w innym arkuszu stylów, ta reguła zapewni dostęp do zmiennych, miksin i funkcji zaimportowanego pliku do drugiego pliku.

Kolejną zaletą, jaką ta reguła SASS ma nad regułą CSS, jest to, że w czasie wykonywania nie ma dodatkowego żądania HTTP.

Składnia

@import FilePath;

Reguła SASS @Import umożliwia włączenie obu typów, co oznacza, że ​​możesz dołączyć pliki SASS do pliku CSS lub zaimportować pliki CSS w pliku SASS. Ponadto możesz zaimportować tyle plików, ile chcesz w pliku głównym. Pliki, które można zaimportować, obejmują pliki resetowania, kolory, zmienne, czcionki itp.

Niektóre przykłady reguły @import w SASS są następujące.

@Import „Fonts”;
@Import „zmienne”;
@Import „Colours”;

Spójrzmy na przykład, aby lepiej zrozumieć tę zasadę.

Przykład

Załóżmy, że mamy plik według nazwy plik 1.sass i wygląda mniej więcej tak.

Sass

H1
Font-Family: Verdana, bez Serif;
Rozmiar czcionki: 30px;
kolor fioletowy;

Mamy również inny plik według nazwy pliku2.sass i ma następujący kod.

Sass

P
Font-Family: Times New Roman, Serif;
Rozmiar czcionki: 20px;
kolor niebieski;

Teraz chcemy zaimportować oba te pliki do innego pliku o głównej nazwie.sass. Do tego użyjemy reguły @Import.

@Import File1, File2

Po skompilowaniu tego głównego.Plik sass nasz wynikowy plik wyjściowy CSS będzie wyglądał w ten sposób.

Pliki zostały pomyślnie zaimportowane!

Notatka: Zastosowanie zasady @Import jest zniechęcane, ponieważ powoduje określenie nazewnictwa, ponieważ daje dostęp do wszystkich funkcji, zmiennych, miksów itp. Ponadto powoduje to również problemy bezpieczeństwa.

Częściowe w Sass

Częściowe w SASS są uważane za pliki, których nazwy zaczynają się od podkreślenia, a nie są one bezpośrednio transpilujące. Częściowe są wykonywane tylko w tych okolicznościach, gdy importujesz plik i nie chcesz, aby Twój plik był transpilujący bezpośrednio przez SASS.

Składnia

_Nazwa pliku;

Na przykład plik pokazany poniżej to „_font.plik SCSS ”.

$ czcionki: 20px;
$ Fontfamily: Times New Roman;
$ kolor: niebieski;

Uruchamianie podkreślenia zapobiega przeniesieniu tego pliku do czcionek.CSS. Jednak jeśli chcesz zaimportować ten plik, nie użyj podkreślenia.

Uruchamianie podkreślenia zapobiega przeniesieniu tego pliku do czcionek.CSS. Jednak jeśli chcesz zaimportować ten plik, nie użyj podkreślenia.
@Import „Fonts”
H1
Font-size: $ fontsize;
tekst-align; Centrum;
Kolor: $ kolor;

W ten sposób częściowy plik SASS zostanie zaimportowany.

Wniosek

Dyrektywa SASS @Import umożliwia włączenie jednego arkusza stylów do drugiego i daje dostęp do zmiennych, miksin, funkcji importowanego pliku do drugiego pliku. Ponadto, w czasie wykonywania nie ma dodatkowego żądania HTTP, gdy wywoływana jest reguła @Import. Tymczasem częściowe w SASS są uważane za pliki, których nazwy zaczynają się od podkreślenia, a nie są one przesyłane bezpośrednio po ich importowaniu. Oba te podmioty są szczegółowo omówione w tym artykule.