Import и Partials в Sass

Sass может поддерживать CSS-код сухим (DRYDon't Repeat Yourself, не повторяйте себя).

Одним из способов написания DRY-кода является хранение связанных кодов в отдельных файлах.

Вы можете использовать CSS фрагменты для создания малых файлов и включения их в другие файлы Sass. Например, такие файлы могут быть: файлы для сброса, переменные, цвета, шрифты и т.д.

Импорт файлов Sass

Как и CSS, Sass также поддерживает @import Инструкции.

@import Инструкции позволяют вам включить содержимое одного файла в другой.

Из-за проблем с производительностью CSS @import У инструкции есть главный недостаток; при каждом вызове создается дополнительный HTTP-запрос. Однако Sass @import Инструкции включают файлы в CSS; поэтому не нужно дополнительных HTTP-запросов при выполнении!

Грамматика импорта Sass:

@import filename;

Совет:Вам не нужно указывать расширение файла, Sass автоматически предполагает, что вы指的是 файл .sass или .scss. Вы также можете импортировать файлы CSS.@import Инструкции импорта файлов, после чего вы можете использовать любые переменные или mixin, определенные в импортируемых файлах.

Вы можете импортировать любое количество файлов в основном файле:

Пример

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

Давайте посмотрим на пример: предположим, у нас есть файл "reset.scss", который выглядит следующим образом:

Грамматика SCSS (reset.scss):

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

Теперь мы хотим импортировать файл "reset.scss" в другой файл, названный "standard.scss".

Мы делаем это следующим образом: обычно добавляем в верхнюю часть файла @import Инструкции; таким образом, их содержимое будет иметь глобальный alcance:

Грамматика SCSS (standard.scss):

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

Таким образом, когда файл "standard.css" переведен, CSS будет выглядеть следующим образом:

Вывод CSS:

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

Sass Partials (локальные файлы)

По умолчанию Sass напрямую переводит все файлы .scss. Однако при импорте файлов вам не нужно, чтобы они были напрямую переведены.

Sass имеет механизм: если вы начинаете имя файла с подчеркивания, Sass не будет его преобразовывать. Файлы,命名 таким образом, называются partials в Sass.

Таким образом, partial файлы Sass называются с начальным подчеркиванием:

Грамматика Sass Partial:

_filename;

Следующий пример показывает partial файл Sass с именем "_colors.scss". (Этот файл не будет напрямую преобразован в "colors.css"):

Пример

"_colors.scss":

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

Теперь, если вы импортируете этот файл partial, пропустите подчеркивание. Sass понимает, что он должен импортировать файл "_colors.scss":

Пример

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