Импорт

CSS имеет возможность импорта, которая позволяет разделить ваш CSS-файл на более мелкие и облегчить@import, то в CSS создается еще один HTTP-запрос. Sass берет идею импорта файлов через директиву @import, но вместо создания отдельного HTTP-запроса Sass импортирует указанный в директиве файл в тот, где он вызывается, т.е. на выходе получается один CSS-файл, скомпилированный из нескольких фрагментов.

Например, у вас есть несколько фрагментов Sass-файлов — _config.scss и Index.scss. И мы хотим импортировать

$background-color : #2dff3e
$color : #ffffff
$font-family : sans-serif
$app-height: 100%
$background : #bcf0ff

@import "config"

body
  .test
    background-color : $background-color
    font-family: $font-family
    p
      color: $color
  height: 100%
  background-color: #0000ee

body {
  height: 100%;
  background-color: #0000ee; }
  body .test {
    background-color: #2dff3e;
    font-family: sans-serif; }
    body .test p {
      color: #ffffff; }

$background-color : #2dff3e;
$color : #ffffff;
$font-family : sans-serif;
$app-height: 100%;
$background : #bcf0ff;

@import "config";

body{
  .test{
    background-color : $background-color;
    font-family: $font-family;
    p{
      color: $color;
    }
  }
  height: 100%;
  background-color: $background;
}

body {
  height: 100%;
  background-color: #0000ee; }
  body .test {
    background-color: #2dff3e;
    font-family: sans-serif; }
    body .test p {
      color: #ffffff; }