Sass @import и Партиалы (частичные файлы)
Sass сохраняет код CSS DRY (Don't Repeat Yourself | Не повторяй сам себя). Один из способов написания DRY-кода - хранить связанный код в отдельных файлах.
Вы можете создавать небольшие файлы с помощью фрагментов CSS для включения в другие файлы Sass. Примеры таких файлов: файл сброса, переменные, цвета, шрифты, размеры шрифтов и т.д.
Sass Импорт файлов
Как и CSS, Sass также поддерживает директиву @import.
Директива @import позволяет вам включать содержимое одного файла в другой.
CSS директива @import имеет серьезный недостаток из-за проблем с производительностью; она создает дополнительный HTTP-запрос каждый раз, когда вы его вызываете. Однако директива Sass @import включает файл в CSS; поэтому во время выполнения не требуется дополнительный HTTP-запрос!
Синтаксис импорта Sass:
@import имяФайла;
Примечание: Вам не нужно указывать расширение файла, Sass автоматически предполагает, что вы имеете в виду файл .sass или .scss. Вы также можете импортировать файлы CSS. Директива @import импортирует файл, и любые переменные или миксины, определенные в импортированном файле, могут затем использоваться в основном файле.
Вы можете импортировать столько файлов, сколько вам нужно в основной файл:
Пример
@import "variables";
@import
"colors";
@import
"reset";
Давайте посмотрим на пример: предположим, у нас есть файл сброса с именем "reset.scss", который выглядит так:
Пример
SCSS Синтаксис (reset.scss):
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
и теперь мы хотим импортировать файл "reset.scss" в другой файл с именем "standard.scss".
Вот как мы это делаем. Обычно директиву @import можно добавлять в начало файла; таким образом его содержимое будет иметь глобальную область видимости:
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 Партиалы (частичные файлы)
По умолчанию Sass переносит все файлы .scss напрямую. Однако, когда вы хотите импортировать файл, вам не нужно, чтобы файл передавался напрямую.
У Sass есть механизм для этого: если вы начинаете имя файла с подчеркивания, Sass не будет его переносить. Файлы, названные таким образом, в Sass называются частичными (партиалами).
Т.о., партиал файл Sass называется с подчеркиванием вначале:
Sass Синтаксис партиала:
_имяФайла;
В следующем примере показан партиал файл Sass с именем "_colors.scss". (Этот файл не будет перенесен прямо в "colors.css"):
Пример
"_colors.scss":
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
Теперь, если вы импортируете партиал файл, не подчеркивайте подчеркивание. Sass понимает, что он должен импортировать файл "_colors.scss":
Пример
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
