Sass @import i Partials

Sass może utrzymać kod CSS suchy (DRY，Don't Repeat Yourself，nie powtarzaj się).

Jednym z sposobów na pisanie DRY (Don't Repeat Yourself) kodu jest przechowywanie związanych kodów w oddzielnym pliku.

Możesz używać fragmentów CSS do tworzenia małych plików, które można zawrzeć w innych plikach Sass. Na przykład, tego typu pliki mogą obejmować: pliki reset, zmienne, kolory, czcionki itp.

Importowanie plików Sass

Jak CSS, Sass również wspiera @import Instrukcja.

@import Instrukcja pozwala na włączenie zawartości jednego pliku do innego.

Z powodu problemów z wydajnością, CSS @import Instrukcja ma główną wadę; przy każdym wywołaniu tworzy dodatkowe żądanie HTTP. Ale Sass @import Instrukcja włącza plik do CSS; więc nie jest potrzebny dodatkowy wywołanie HTTP podczas uruchamiania!

Gramatyka importowania Sass:

@import nazwa_pliku;

Wskazówka:Nie musisz określać rozszerzenia pliku, Sass automatycznie zakłada, że masz na myśli plik .sass lub .scss. Możesz również zaimportować pliki CSS.@import Instrukcja importowania plików, po której można używać zmiennych lub mixinów zdefiniowanych w zaimportowanym pliku.

Możesz zaimportować dowolną liczbę plików w pliku głównym:

Przykład

@import "variables";
@import "colors";
@import "reset";

Pozwólcie, że pokażemy przykład: załóżmy, że mamy plik o nazwie "reset.scss", który wygląda tak:

Gramatyka SCSS (reset.scss):

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

Teraz chcemy zaimportować plik "reset.scss" do innego pliku o nazwie "standard.scss".

To robimy: zazwyczaj dodajemy do góry pliku @import Instrukcje; w ten sposób ich zawartość będzie miała zasięg globalny:

Gramatyka SCSS (standard.scss):

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Zatem, gdy plik "standard.css" jest przetwarzany, CSS będzie wyglądał tak:

Wyjście CSS:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Partials (pliki lokalne)

Domyślnie, Sass automatycznie przetwarza wszystkie pliki .scss. Jednakże, podczas importowania plików, nie musisz, aby pliki były przetwarzane bezpośrednio.

Sass ma mechanizm: jeśli nazwa pliku zaczyna się od podkreślenia, Sass nie przetłumaczy go. Pliki o takiej nazwie nazywane są partialami w Sass.

Z tego powodu, pliki partial Sass są nazwane z wiodącym podkreśleniem:

Gramatyka Sass Partial:

_filename;

Poniższy przykład pokazuje plik partial Sass o nazwie "_colors.scss". (Ten plik nie zostanie bezpośrednio przekształcony do "colors.css"):

Przykład

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

Teraz, jeśli zaimportujesz ten plik partial, pomóż podkreślić podkreślenia. Sass rozumie, że powinien zaimportować plik "_colors.scss":

Przykład

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}