В чем разница между импортом в Sass и импортом на чистом CSS?

Разница между импортом в Sass и CSS

Хотя синтаксис выглядит одинаково, механизм работы и результат совершенно различаются. Это критическое различие влияет на производительность и размер финального CSS файла.

Sass @import — препроцессинг

Sass @import работает на уровне препроцессинга (до компиляции). Sass прямо вставляет содержимое импортируемого файла в место импорта.

// colors.scss
$primary: #3498db;
$secondary: #e74c3c;

// styles.scss
@import 'colors';

.button {
  background: $primary;
}

// Результат компиляции в CSS:
// .button { background: #3498db; }

Все переменные, миксины и функции из colors.scss становятся доступны в styles.scss. Весь код компилируется в ОДИН файл.

CSS @import — нативный импорт

CSS @import работает на уровне браузера (во время загрузки страницы). Браузер загружает внешний CSS файл отдельным HTTP запросом.

/* styles.css */
@import url('colors.css');

.button {
  background: var(--primary);
}

/* colors.css загружается отдельным запросом */
:root {
  --primary: #3498db;
}

Каждый @import в CSS создает новый HTTP запрос. Это медленнее, чем Sass.

Сравнение ключевых различий

Практические примеры

Sass @import — правильный подход

// 1. Переменные и функции
@import 'variables';       // $colors, $fonts
@import 'functions';        // @function lighten()
@import 'mixins';           // @mixin button()

// 2. Базовые стили
@import 'reset';            // normalize
@import 'typography';       // font стили

// 3. Компоненты
@import 'components/button';
@import 'components/card';
@import 'components/form';

// 4. Макеты
@import 'layouts/header';
@import 'layouts/footer';

// Результат: styles.css (1 файл, ~50kb)

CSS @import — когда использовать

/* Для опциональных шрифтов */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700');

/* Для разделения очень больших стилей (если нужна параллельная загрузка) */
@import url('desktop-only.css') (min-width: 1024px);

/* Для внешних библиотек, которые поставляют готовый CSS */
@import url('bootstrap.css');

Производительность

Сценарий: 5 импортов Sass файлов

@import 'colors';
@import 'typography';
@import 'buttons';
@import 'forms';
@import 'layouts';
// Результат: 1 HTTP запрос, 1 файл

Сценарий: 5 CSS импортов

@import url('colors.css');
@import url('typography.css');
@import url('buttons.css');
@import url('forms.css');
@import url('layouts.css');
// Результат: 5 HTTP запросов (или 6, если считать главный)

CSS импорты блокируют параллельную загрузку и замедляют рендеринг.

Современный подход

1. Используй Sass @import для всех локальных файлов
2. Используй CSS @import только для:
   • Google Fonts
   • Внешних CDN
   • Условной загрузки по media queries
3. Или переходи на @use (новый Sass синтаксис вместо @import)

@use — будущее (Sass 1.23+)

// Вместо @import
@import 'colors;

// Используй @use (имеет области видимости)
@use 'sass:color as color;
@use 'variables';  // переменные как variables.$primary

Выводы

• Sass @import = препроцессинг — вставка кода на этапе компиляции
• CSS @import = нативный браузер — загрузка по отдельным HTTP запросам
• Всегда предпочитай Sass для локальных файлов (быстрее, меньше запросов)
• CSS @import только для внешних ресурсов (Google Fonts, CDN)