sass
Частицы и импорт
Поиск…
Импорт
Использование @import позволяет разделить ваши файлы на несколько небольших файлов. Это имеет смысл, поскольку вы можете сохранить лучшую структуру для своих таблиц стилей и избегать очень больших файлов.
пример
Допустим, у вас есть несколько файлов.
- application.scss
- header.scss
- content
|-- article.scss
'-- list.scss
- footer.scss
Ваша основная таблица стилей application.scss может импортировать все файлы, а также определять собственные стили.
// application.scss
// Import files:
@import 'header.scss';
@import 'content/article.scss';
@import 'content/list.scss';
@import 'footer.scss';
// other styles in application.scss
body {
margin: 0;
}
Обратите внимание, что вы также можете опустить расширение .scss чтобы вы могли написать @import 'header'; вместо @import 'header.scss' .
Это приводит к тому, что application.scss имеет все импортированные .scss включенные в скомпилированный файл, который вы обслуживаете для клиента (браузера). В этом случае ваш скомпилированный файл будет application.css который вы включите в свой html.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
</head>
<body>
...
</body>
</html>
Хотя вы работаете с несколькими файлами, вы обслуживаете только один файл, устраняя необходимость в нескольких запросах (по одному для каждого файла) и ускоряя время загрузки для ваших посетителей.
Основные преимущества
- Лучшая структура для разработки с использованием папки и нескольких файлов
- Обслуживание только одного файла клиенту (браузеру)
Partials
Вы можете создавать частичные файлы, содержащие меньшие фрагменты ваших таблиц стилей. Это позволяет вам модулизовать ваш CSS и позволяет лучше структурировать ваши таблицы стилей. Частичным является файл Sass, названный с лидирующим подчеркиванием, то есть: _partial.scss . Подчеркивание позволяет Sass знать, что конкретный файл является частичным, и он не будет сгенерирован в файл CSS.
@import Sass предназначены для использования с директивой @import . При использовании @import вы можете опустить ведущее подчеркивание.
пример
Предположим, что у вас есть файловая структура с такими частицами, как это
- main.scss
- _variables.scss
- content
|-- _buttons.scss
'-- _otherelements.scss
Вы можете включить эти частичные файлы в свой файл main.scss следующим образом (ведущие подчеркивания и расширения файлов в этом примере опущены):
// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';