7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Sass

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

Read Time: 2 mins

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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.