Różnice CSS @import oraz Sass @import

To pytanie z serii niestandardowych zagadnień poruszanych na rozmowach rekrutacyjnych. Z mojego doświadczenia powiem Wam, że raczej nie jest popularne. Choć dyrektywa @import w sumie idealnie nadaje się na sprawdzenie nieco ponad podstawowej wiedzy z CSSów.

A więc… jak to jest z tymi importami? Wiemy, że CSS posiada własną dyrektywę @import służącą do importowania zewnętrznych, odrębnych plików CSS. I wiemy też, że Sass daje nam… dokładnie taką samą funkcjonalność. Czy aby na pewno?

CSSowy @import wydarza się at runtime, czyli w czasie działania strony w przeglądarce. Użytkownik pobiera zewnętrzne pliki ze stylami za pomocą tylu zapytań, ile mamy osobnych, importowanych plików CSS. Wniosek – ten import jest fajny pod kątem architektury, czytelności kodu i szybkości jego pisania. Jednak w ostatecznej postaci dla klienta – projekt cechuje się poważną wadą wydajnościową w postaci wielu po prostu nadmiarowych zapytań do serwera. Oczywiście za pomocą CSS @import możesz importować tylko pliki .css.

Sassowy @import wydarza się podczas budowania projektu. Działa w ten sposób, że dosłownie łączy pliki w jeden arkusz CSS. Użytkownik pobierze go jednym zapytaniem. Wniosek – ten import dostarcza nam dokładnie tę samą funkcjonalność, co CSSowy import jednocześnie rozwiązując problem wydajności strony u klienta.

Generalnie Sass @import działa tak, że dołącza treść importowanego pliku stylów dokładnie w miejscu dyrektywy @import.

Przykład prosto od Sass’a. Importujemy plik _reset.scss do pliku base.scss.

// _reset.scss

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

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

base.scss kompiluje się do base.css, który wygląda następująco:

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

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Sass @import pozwala zarówno na import plików .css, jak i .sass, .scss (więcej o tych rozszerzeniach przeczytasz u mnie na blogu). Jednak, uwaga – istnieją przypadki, że zadziała on jak CSSowy import (co oczywiście jest działaniem nieporządanym). Stanie się tak, gdy:

importujesz plik .css (choć tu rozwiązaniem jest pominięcie rozszerzenia w nazwie importowanego pliku – klik)
ścieżka do pliku zaczyna się od http://
ścieżka do pliku to url()
@import posiada media queries.

Przykład z dokumentacji. Chodzi mi o to, że:

@import "foo.scss";

lub

@import "foo";

importują treść pliku foo.scss (tak jak tego chcemy).

Jednakże:

@import "foo.css";
@import "http://foo.com/bar";
@import url(foo);
@import "foo" screen;

skompilują się do

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

… czyli to CSSowego importu

Generalnie mówi się, aby używać dyrektywy Sass @import kiedy tylko się da.

To na tyle z podstawowej wiedzy, która w zupełności wystarczy Wam na rozmowę rekrutacyjną. Jeśli jesteście głodni bardziej zaawansowanych informacji – sprawdźcie te linki: o ROZWAŻNYM korzystaniu z importa w preprocesorach, o szczegółach Sass @import, stackoverflow, o wadach CSSowego importu.

Artykuły, które mogą Ci się spodobać...