Import Options
Less предлагает несколько расширений для CSS, в частности @import обеспечивает большую гибкость при работе с внешними файлами.
Синтаксис: @import (keyword) "имя файла";
Реализованы следующие директивы импорта:
- reference: использовать Less файл, но не выводить его
- inline: включить исходный файл в вывод, но не обрабатывать его
- less: обработать файл как Less-файл вне зависимости от его расширения
- css: обработать файл как CSS-файл вне зависимости от его расширения
- once: включать файл только один раз (по умолчанию)
- multiple: включить файл несколько раз
- optional: продолжить компилирование, если файл не найден
Можно использовать более одного ключевого слова для @import
, но нужно разделять их запятыми:
@import (optional,reference) "fo.less";
reference
Появилось в v1.5.0. Используйте @import (reference)
, чтобы импортировать внешние файлы, но без добавления импортированных стилей к скомпилированному выводу до создания ссылок. Например:
@import (reference) "foo.less";
Представьте, что reference
отмечает каждую директиву и селектор с помощью флага ссылки в импортированном файле, импортирует их как нормальные, но при создании CSS, «ссылочные» селекторы (равно как и любые медиа-запросы, содержащие только ссылочные селекторы) не выводятся. Стили reference
не будут отображаться в вашей созданной CSS до тех пор, пока ссылочные стили используются как примеси, или расширения.
Дополнительно, reference
производит разные результаты, в зависимости от того, какой метод используется (примеси или расширение):
- расширения: Когда селектор расширен, только новый селектор помечается как не ссылочный, и он стоит на позиции оператора
@import
.
- примеси: Когда стиль
reference
используется как скрытая примесь, его правила перемешаны, отмечены «не ссылочными» и появляются в ссылочном месте.
reference example
Позволяет вытащить только нужные стили из библиотек, скажем Bootstrap и сделать что-то вроде этого:
.navbar:extend(.navbar all) {}
Вы используете только стили, относящиеся к .navbar
из Bootstrap.
inline
Появилось в v1.5.0. Используйте @import (inline)
, чтобы включить внешние файлы, но не обрабатывать их. Например:
@import (inline) "not-less-compatible.css";
Директива используется когда файл CSS будет не совместим с Less; потому что хоть Less и поддерживает основные известные стандарты CSS, он не поддерживает комментарии в некоторых местах, а также не поддерживает все известные CSS хаки без изменений самих CSS.
Таким образом, вы можете использовать это, чтобы включить файл в вывод так, что все CSS будет в одном файле.
less
Появилось в v1.4.0. Используйте @import (less)
, чтобы обрабатывать импортированные файлы как Less, независимо от расширения. Например:
@import (less) "foo.css";
css
Появилось в v1.4.0. Используйте @import (css)
, чтобы обрабатывать импортированные файлы как обычные CSS, независимо от расширения. Это означает, что оператор импорта будет оставлен как есть. Например:
@import (css) "foo.less";
Получим на выходе:
@import "foo.less";
once
Появилось в v1.4.0. Эта директива означает, что файл импортируется только один раз, а последующие операторы импорта для этого файла будут игнорироваться. Эта директива используется в операторе @import
по умолчанию. Пример:
@import (once) "foo.less";
@import (once) "foo.less"; // проигнорируется
multiple
Появилось в v1.4.0. Используйте @import (multiple)
, чтобы разрешить импорт нескольких файлов с одинаковым именем. Эта настройка является противоположностью once. Например:
// файл: foo.less
.a {color: green;}
// файл: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
В результате получим:
.a {color: green;}
.a {color: green;}