Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. Sass
Webdesign

От Sass к CSS: как сохранить пробелы при компиляции

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

Хотели ли вы когда-нибудь сохранить визуальную структуру ваших Sass файлов, при компилировании CSS, без потери пробелов? Сейчас я вам дам быстрый совет, как это сделать!

Смотрим быстрый совет

Этот быстрый совет для тех из вас, кому нужно компилировать Sass в "расширенной" форме. Если вы конвертируете в "сжатый" или "минимизированный" формат, тогда этот вопрос для вас не актуален.

Суть проблемы

Представьте что у вас несколько частей Sass, которые отформатированный следующим образом, включая пустые разделяющие строки внизу.

При компилировании их с обычным условиями, вы получите что-то вроде этого:

Но, допустим, на самом деле вы хотите вот так:

Решение

Давайте решим это с помощью плагина для Grunt, под названием grunt-replace. Для получения информации о том, как начать работу с Grunt, взгляните на следующие ресурсы:

Подгружаем grunt-replace, наряду с другими зависимостями, в нашем файле package.json, как показано в примере ниже:

Затем, в файле grunt.js нам нужно выполнить задачу:

Совпадение

Мы применяем задачу замены после того, как мы скомпилировали наш Sass файл (детали вы найдёте в исходных файлах).

Отметьте, что опция patterns показывает следующее:

Это проинструктирует Grunt, обработать скомпилированный файл, найти совпадение по /**/ и заменить каждое из них пустой строкой. Теперь, все что нам осталось сделать, это пройти через наши части Sass, заменив эти комментарии /**/, там где нам нужны пробелы, и позволим Grunt сделать остальное:

Заключение

Grunt-replace выполняет действительно полезную задачу по поиску обычных строк и замену их на что-либо ещё, когда вы запускаете Grunt В данном случае, это идеальный инструмент для сохранения пробелов при компилировании Sass. Для чего ещё вы бы его использовали?

Полезные ресурсы

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.