Хотели ли вы когда-нибудь сохранить визуальную структуру ваших 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

  В этом уроке вы узнаете, как настраивать запуск задач, и в процессе вы также увидите пример вставки скриптов из пакетов Bower для ...

• Новый короткий курс: Настройка рабочего процесса для профессиональной разработки интерфейсов (Front-End)

  Хотите создать более эффективный рабочий процесс для фронт-энд разработки? Попробуйте наш последний курс «Настройка рабочего процесса для профессиональной разработки интерфейсов (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. Для чего ещё вы бы его использовали?

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

• grunt-replace
• gulp-replace