[HTML|JS|CSS] Sass : Importowanie styli

Bardzo dobrą praktyką przy pisaniu CSSów jest rozbicie selektorów na wiele plików tak, aby w przyszłości móc szybko dokonać potrzebnych zmian. Sass umożliwia importowanie styli zdefiniowanych w wielu plikach .scss a następnie transformację w jeden plik css. Odpowiada za to instrukcja @import. Pliki, które chcemy importować, powinny przez konwencję zaczynać się od podkreślenia, np. _external.scss. W momencie importu do pliku wyjściowego zostaną przekopiowane wszystkie selektory. Dodatkowo mamy dostęp do mixinów i zmiennych zdefiniowanych w zewnętrznych plikach.

Przykładowo, następujący plik o nazwie _external.scss

.external-style{
 border-radius : 3px;
}

@mixin external-mixin{
 font-size: 13px;
}

$myvar : 10px;

#element{
 margin-left: $myvar;
}

możemy wykorzystać w innym pliku w następujący sposób:

@import 'external';

.imported{
 @include external-mixin;
 padding-top: $myvar;
}

Po transformacji otrzymamy:

.external-style {
  border-radius: 3px; }

#element {
  margin-left: 10px; }

.imported {
  font-size: 13px;
  padding-top: 10px; }