Данный плагин для Sublime Text 3 предназначен для импорта содержимого css-блоков (БЭМ) в отдельный файл.
При использовании плагина создаётся новый файл с именем основной-файл.min.css в той же директории, где лежит основной файл.css с импортами (@import) css-блоков. В новый файл помещается содержимое каждого блока в соответствии с последовательностью описаний импортов в основном файле.css.
Все пути к файлам, прописанные в конструкции url(...), заменяются на соответствующие, если блок располагается на другом уровне каталогов.
В данной конструкции учитывается следующее:
- путь только в скобках, без кавычек:
url(block.jpg) - путь в скобках и обрамлён одинарными кавычками:
url('block.jpg') - путь в скобках и обрамлён двойными кавычками:
url("block.jpg")
Также учитываются исключения, которые не требуют преобразования пути:
- base64
url(data:image/png;base64,iVBORw...) - ссылки на веб-ресурсы
url(http://site.com/image.jpg)
это значит, что base64 и веб-ссылки не будут преобразованы, независимо от того, где располагается родительский css-блок
Есть файл index.css со списком импортов:
@import "blocks/block-1/block-1.css"
@import "../blocks/block-2/block-2.css"
@import "../../blocks/block-3/block-3.css"
После использования плагина в том же каталоге создаётся файл index.min.css с содержимым каждого блока:
.block-1 {
background: url(blocks/block-1/block-1__image.png);
}
.block-2 {
background: url('../blocks/block-2/block-2__image.png');
}
.block-3 {
background: url("../../blocks/block-3/block-3__image.png");
}
.block-3__element {
background: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
}
Все пути (кроме исключений) заменяются в соответствии с расположением импортированного блока по отношению к текущему каталогу.
- Скачать cssImport.py
- Поместить его в папку плагинов Sublime Text 3:
- OS X:
~\Library\Application Support\Sublime Text 3\Packages\User - Win:
~\AppData\Roaming\Sublime Text 3\Packages\User - Linux:
~\.Sublime Text 3\Packages\User
- Ставим запуск плагина на хоткей Preferences > Key Bindings:
У меня это
alt+ctrl+c, у тебя может быть любая другая комбинация. Главное - команда для запуска плагина:"cssimport"
{
"keys": ["alt+ctrl+c"],
"command": "cssimport",
}
- Открываем файл с импортами и нажимаем соответствующий хоткей.
... в будущем я сделаю этот плагин универсальным, чтобы он автоматически делал автопрефикс с последующей минификацией. Пока для этого есть отдельные прекрасные плагины.