Коли ви створюєте email-шаблони, ви не просто пишете HTML. Ви готуєте бойову одиницю, яка повинна відображатись однаково в десятках різних поштових клієнтів — від Gmail до Outlook, від десктопу до Android-додатку. І якщо до цього додати потребу підтримки локалізації, параметрів та стилів - без автоматизації все швидко перетровиться на жах а не на приємну роботу.

Ця стаття — про те, як ми у своїх проектах організували повноцінну систему шаблонізації email-листів з SCSS, інлайновими стилями та Handlebars.

---

## 1. Проблематика email-верстки

Забудьте про сучасний фронтенд. У email-клієнтах:

* `style` може бути проігнорований
* SCSS не працює
* `:hover`, `flexbox`, `grid` — тільки для обраних
* стилі краще(скажемо - потрібно!) писати в кожному `style=""`, бо так точно спрацює

І це не паранойя. Наприклад:

* Gmail на мобільному взагалі не читає `<style>`
* Outlook 2013 і далі — свій рендерер на базі Word
* Apple Mail — окей, але не все

---

## 2. Архітектура: SCSS + Inline + Handlebars

Ми розбили весь процес на три ключові етапи:

1. Обробка шаблону з параметрами (Handlebars)
2. Компіляція SCSS у CSS
3. Інлайн стилізація через `juice`

---

## 3. Шаблон із параметрами

Ми використовуємо [Handlebars](https://handlebarsjs.com/) як шаблонізатор. Це простий та надійний спосіб вставляти динамічні дані в HTML.

### Приклад шаблону `email-template.html`:

```html
<style>
  .btn {
    background: #007bff;
    color: white;
    padding: 12px 24px;
    text-decoration: none;

    &:hover {
      background: #0056b3;
    }
  }

  .message {
    font-size: 16px;
    color: #333;
  }
</style>

<div class="message">
  Привіт, {{username}}!
</div>

<a href="{{ctaUrl}}" class="btn">Перейти</a>
```

---

## 4. Очікуваний результат перед вставкою у тіло листа

Цей шаблон повинен після обробки перетворитися на:

```html
<a href="https://example.com/action"
   class="btn"
   style="background:#007bff;color:white;padding:12px 24px;text-decoration:none;">
  Перейти
</a>
```

І вже в тілі email-а буде:

```html
<div class="message" style="font-size:16px;color:#333;">
  Привіт, Сергію!
</div>

<a href="https://example.com/action"
   class="btn"
   style="background:#007bff;color:white;padding:12px 24px;text-decoration:none;">
  Перейти
</a>
```

---

## 5. Код: функція для генерації повного HTML

```javascript
const Handlebars = require("handlebars");
const sass = require("sass");
const juice = require("juice");
const CleanCSS = require("clean-css");

/**
 * Компілює email-шаблон з параметрами, SCSS і inline-стилями
 * @param {string} rawTemplate - Шаблон з SCSS і {{params}}
 * @param {object} context - Значення параметрів, які треба вставити
 * @param {object} options - Налаштування стилізації
 * @returns {string} - Готовий HTML
 */
function compileEmailTemplate(rawTemplate, context = {}, options = {}) {
  const {
    inlineStyles = true,
    preserveStyleTags = false,
    minify = true,
  } = options;

  // 1. Рендер Handlebars
  const compiled = Handlebars.compile(rawTemplate);
  const renderedHtml = compiled(context);

  // 2. Витягуємо і компілюємо SCSS
  const cleanCSS = new CleanCSS();
  const htmlWithFlatCss = renderedHtml.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (_, scssCode) => {
    try {
      const result = sass.compileString(scssCode);
      let css = result.css;

      if (minify) {
        const minified = cleanCSS.minify(css);
        if (minified.errors.length === 0) {
          css = minified.styles;
        } else {
          console.warn("Minify errors:", minified.errors);
        }
      }

      return `<style>${css}</style>`;
    } catch (err) {
      console.error("SCSS compile error:", err);
      return `<style>${scssCode}</style>`;
    }
  });

  // 3. Inline стилі
  if (inlineStyles) {
    return juice(htmlWithFlatCss, {
      preserveStyleTags,
    });
  }

  return htmlWithFlatCss;
}
```

---

## 6. Як це виглядає у використанні

```js
const template = `
<style>
  .btn {
    background: green;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
  }

  .header {
    font-weight: bold;
    font-size: 24px;
    color: #222;
  }
</style>

<div class="header">Вітаємо, {{username}}!</div>
<a href="{{link}}" class="btn">Натисніть тут</a>
`;

const context = {
  username: "Олександре",
  link: "https://example.com/verify",
};

const emailHtml = compileEmailTemplate(template, context);
console.log(emailHtml);
```

Звичайно, це просто приклад. Шаблони для різних електронних листів ми зберігаємо в базі даних, дані формуються динамічно.

А ось який результат ми отримуємо (emailHtml):

```html
<div class="header" style="font-weight:bold;font-size:24px;color:#222;">
  Вітаємо, Олександре!
</div>

<a href="https://example.com/verify"
   class="btn"
   style="background:green;color:white;padding:10px 20px;text-decoration:none;">
  Натисніть тут
</a>
```

---

## 7. Переваги такого підходу

* Пишеш у SCSS, отримаєш стабільний email-HTML
* Можна використовувати змінні, міксини, структуру
* Можна вставляти динамічні параметри через Handlebars
* Email працює у всіх клієнтах без сюрпризів
* Можна готувати одну і ту саму основу для email і веб-перегляду


## Висновок

Тепер створення email-шаблонів - це більше не проблема. Ви можете писати стилі у звичному SCSS-форматі, використовувати динамічні шаблони з параметрами та отримувати на виході чистий, надійний HTML, який виглядає однаково у всіх поштових клієнтах. Такий підхід усуває рутинну роботу, дає повний контроль над результатом і суттєво прискорює розробку.

Звичайно, у реальному проєкті ми використовуємо UI для зручного формування та редагування шаблонів, тестування з фіктивними даними, попереднього перегляду результатів і навіть відправлення листів на тестові email-адреси. Але технічна основа, описана в цій статті, є серцем усього процесу. Сподіваємось, наш досвід стане вам у пригоді.

Успішної розробки та натхнення в роботі!


Email-шаблони часто викликають труднощі через обмеження поштових клієнтів. У статті показано ефективну систему, яка дозволяє використовувати SCSS, Handlebars і автоматичну інлайн-стилізацію для створення адаптивних листів. Підхід забезпечує стабільне відображення HTML у всіх основних поштових сервісах. Це суттєво полегшує розробку та покращує контроль над результатом.

Створення email-шаблонів із підтримкою SCSS і динамічних даних

Знайдіть статтю за темою наSpotlib🔎