Як встановити Sass на VPS і автоматизувати компіляцію стилів?
Сучасна верстка давно вийшла за межі звичайного CSS. У великих проєктах розробникам потрібно використовувати змінні, вкладені стилі, міксіни, розділення коду на модулі та інші можливості, які роблять код зрозумілішим і масштабованішим. Саме для цього використовують Sass — один із найпопулярніших CSS-препроцесорів.
Зазвичай Sass встановлюють локально на комп’ютері розробника. Проте в багатьох командах зручніше винести процес компіляції на орендованому VPS (рекомендуємо — SIDATA, як якісного хостинг-провайдера). Це дозволяє автоматизувати збірку стилів, працювати над проєктом із різних пристроїв та запускати процеси збірки без прив’язки до конкретного комп’ютера.
Встановлення Sass на сервер також корисне, якщо:
- ви працюєте з CI/CD або автоматичними збірками;
- кілька розробників працюють над одним проєктом;
- потрібно автоматично компілювати стилі на staging або production сервері;
- необхідно запускати watcher, який буде відстежувати зміни у файлах.
У такому випадку VPS стає централізованим середовищем для компіляції та тестування стилів. Це дуже зручно, якщо ви працюєте над середнім або великим проектом, який потребує багато css-коду.
Як встановити Sass на VPS (Ubuntu або Debian)?
Розглянемо базову інструкцію встановлення Sass на сервер із Ubuntu або Debian. Найзручніше встановлювати Sass через Node.js, оскільки сучасна версія препроцесора розповсюджується через npm.
1. Оновлення системи
Спочатку підключіться до сервера через SSH і оновіть пакети:
sudo apt update sudo apt upgrade -y
2. Встановлення Node.js та npm
Для роботи Sass потрібен Node.js. Установимо його разом із npm:
sudo apt install nodejs npm -y
Перевіримо, що все встановилось:
node -v npm -v
Якщо система показує версії — можна переходити до наступного кроку.
3. Встановлення Sass
Тепер встановимо Sass глобально через npm:
sudo npm install -g sass
Після завершення перевіримо інсталяцію:
sass --version
Якщо команда повертає номер версії — Sass готовий до роботи.
4. Створення тестового проєкту
Створимо папку для стилів:
mkdir project cd project
Далі створимо файл Sass:
nano style.scss
Наприклад:
$primary: #3a7cff;
body {
font-family: Arial;
background: $primary;
h1 {
color: white;
}
}
Збережіть файл.
5. Компіляція Sass у CSS
Щоб скомпілювати стилі, виконайте:
sass style.scss style.css
Після цього в каталозі з’явиться файл style.css, який можна підключати до сайту.
6. Автоматична компіляція
Щоб Sass автоматично відстежував зміни у файлах, використовуйте режим watch:
sass --watch style.scss:style.css
Тепер кожна зміна у файлі .scss автоматично перетворюватиметься у CSS.
Корисні команди Sass
Кілька команд, які часто використовують у реальних проєктах. Більшість команд ви знайдете у документації Sass.
Компіляція всієї папки
sass scss:css
Ця команда компілює всі .scss файли з папки scss у папку css.
Мінімізація CSS
Для production можна згенерувати мінімізований файл:
sass style.scss style.min.css --style=compressed
Автоматична компіляція всієї папки
sass --watch scss:css
Встановлення Sass займає кілька хвилин
Встановлення Sass на VPS займає лише кілька хвилин, але значно спрощує роботу з CSS у великих проєктах. Сервер може виконувати роль централізованого середовища для компіляції стилів, автоматичних збірок і командної розробки.
Такий підхід особливо зручний, коли над проєктом працює кілька розробників або коли потрібно інтегрувати процес компіляції стилів у CI/CD. У результаті ви отримуєте більш чистий CSS, автоматизовану збірку і стабільне середовище розробки, доступне з будь-якого місця.