Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)
Хотели ли вы когда-нибудь сохранить визуальную структуру ваших Sass файлов, при компилировании CSS, без потери пробелов? Сейчас я вам дам быстрый совет, как это сделать!
Смотрим быстрый совет
Этот быстрый совет для тех из вас, кому нужно компилировать Sass в "расширенной" форме. Если вы конвертируете в "сжатый" или "минимизированный" формат, тогда этот вопрос для вас не актуален.
Суть проблемы
Представьте что у вас несколько частей Sass, которые отформатированный следующим образом, включая пустые разделяющие строки внизу.
/******************************************************************************
*
* Partial.
*
*****************************************************************************/
body {
font-size: 100%;
}
При компилировании их с обычным условиями, вы получите что-то вроде этого:
/******************************************************************************
*
* Partial.
*
*****************************************************************************/
body {
font-size: 100%;
}
/******************************************************************************
*
* Partial.
*
*****************************************************************************/
body {
font-size: 100%;
}
/******************************************************************************
*
* Partial.
*
*****************************************************************************/
body {
font-size: 100%;
}
Но, допустим, на самом деле вы хотите вот так:
/******************************************************************************
*
* Partial.
*
*****************************************************************************/
body {
font-size: 100%;
}
/******************************************************************************
*
* Partial.
*
*****************************************************************************/
body {
font-size: 100%;
}
/******************************************************************************
*
* Partial.
*
*****************************************************************************/
body {
font-size: 100%;
}
Решение
Давайте решим это с помощью плагина для Grunt, под названием grunt-replace. Для получения информации о том, как начать работу с Grunt, взгляните на следующие ресурсы:
Командная строка для веб-дизайнера: Автоматизация с помощью Grunt
Новый короткий курс: Настройка рабочего процесса для профессиональной разработки интерфейсов (Front-End)
Подгружаем grunt-replace, наряду с другими зависимостями, в нашем файле package.json, как показано в примере ниже:
"devDependencies": {
"grunt": "^1.0.1",
"grunt-replace": "^1.0.1",
"grunt-sass": "^2.0.0",
"load-grunt-tasks": "^3.5.2"
}
Затем, в файле grunt.js нам нужно выполнить задачу:
// Task: replace.
replace: {
css: {
options: {
usePrefix: false,
patterns: [
{
match: '/**/',
replacement: ''
}
]
},
files: [
{
'css/styles.css': 'css/styles.css' // for single file
}
]
}
}
Совпадение
Мы применяем задачу замены после того, как мы скомпилировали наш Sass файл (детали вы найдёте в исходных файлах).
Отметьте, что опция patterns показывает следующее:
match: '/**/', replacement: ''
Это проинструктирует Grunt, обработать скомпилированный файл, найти совпадение по /**/ и заменить каждое из них пустой строкой. Теперь, все что нам осталось сделать, это пройти через наши части Sass, заменив эти комментарии /**/, там где нам нужны пробелы, и позволим Grunt сделать остальное:
/******************************************************************************
*
* Partial.
*
*****************************************************************************/
body {
font-size: 100%;
}
/**/
/**/
/**/
/**/
/**/
/**/
/**/
Заключение
Grunt-replace выполняет действительно полезную задачу по поиску обычных строк и замену их на что-либо ещё, когда вы запускаете Grunt В данном случае, это идеальный инструмент для сохранения пробелов при компилировании Sass. Для чего ещё вы бы его использовали?
Полезные ресурсы
