======Импорт======

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

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

====sass====
<sxh sass; title: _config.sass>
$background-color : #2dff3e
$color : #ffffff
$font-family : sans-serif
$app-height: 100%
$background : #bcf0ff
</sxh>

<sxh sass; title: Index.sass>
@import "config"

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

<sxh css; title: Index.css>
body {
  height: 100%;
  background-color: #0000ee; }
  body .test {
    background-color: #2dff3e;
    font-family: sans-serif; }
    body .test p {
      color: #ffffff; }
</sxh>

====scss====
<sxh sass; title: _config.scss>
$background-color : #2dff3e;
$color : #ffffff;
$font-family : sans-serif;
$app-height: 100%;
$background : #bcf0ff;
</sxh>

<sxh scss; title: Index.scss>
@import "config";

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


<sxh css; title: Index.css>
body {
  height: 100%;
  background-color: #0000ee; }
  body .test {
    background-color: #2dff3e;
    font-family: sans-serif; }
    body .test p {
      color: #ffffff; }
</sxh>
----
<note>
Обратите внимание на то, что мы используем @import 'config'; в Index.scss файле. Когда вы импортируете файл, то не нужно указывать расширение .scss. Sass — умный язык и он сам догадается.
</note>