От Sass к CSS: как сохранить пробелы при компиляции
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. Для чего ещё вы бы его использовали?