What is the difference between importing in CSS and importing in preprocessors?

@import in CSS loads styles sequentially at runtime, which can slow down page rendering. Each @import creates a separate HTTP request to load the style file.

Importing in preprocessors (Sass, Less) occurs at compile time. All imported files are combined into a single output CSS file. This reduces the number of HTTP requests and improves performance. Additionally, variables, mixins, and other preprocessor features can be used across imported files.

Example in Sass:

// variables.scss
$primary-color: #333;

// styles.scss
@import 'variables';

body {
  color: $primary-color;
}

Compilation result (styles.css):

body {
  color: #333;
}

Unlike native CSS @import, where importing in styles.css would look like:

@import url("variables.css");

body {
  color: var(--primary-color); /* If variables are defined in variables.css */
}

In this case, variables.css will be loaded with a separate HTTP request.