@import

При помощи директивы @import можно импортировать один файл со стилями в другой файл со стилями.

Предположим, в проекте для удобства стили разделены на несколько файлов:

1. fonts.css — файл с подключением шрифтов и стилями.
2. buttons.css — файл со стилями для кнопок.
3. main.css — основной файл стилей с остальным CSS-кодом.

Нам нужно, чтобы все стили загружались при открытии страницы. Для этого импортируем отдельные файлы в наш основной файл main.css:

        
          
          @import "fonts.css";@import "buttons.css";/*  Остальной CSS-код */
          @import "fonts.css";
@import "buttons.css";

/*  Остальной CSS-код */

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Равнозначные варианты импорта:

        
          
          @import "file.css";@import url("file.css");
          @import "file.css";
@import url("file.css");

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Технической разницы между этими двумя вариантами нет. Файлы будут импортироваться одинаково в обоих случаях. Путь до файла может быть как абсолютным, так и относительным.

Можно указать, для каких типов устройств должны применяться стили из импортируемого файла:

        
          
          @import "print-styles.css" print;@import "screen-styles.css" screen;
          @import "print-styles.css" print;
@import "screen-styles.css" screen;

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В этом примере стили из файла, импортируемого в первой строке, будут применяться только при печати. А стили из файла, импортируемого во второй строке, будут применяться для отображения на экране.

Допустимо указывать несколько медиавыражений после пути:

        
          
          @import "file.css" (min-width: 481px) and (max-width: 768px);@import "file.css" screen and (orientation: landscape);
          @import "file.css" (min-width: 481px) and (max-width: 768px);
@import "file.css" screen and (orientation: landscape);

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Можно проверить, поддерживается ли какое-то конкретное правило или выражение в браузере пользователя, и загрузить для него конкретные стили. Для этого используется правило supports:

        
          
          @import "file.css" supports(not (display: flex));/* Остальной CSS-код */
          @import "file.css" supports(not (display: flex));

/* Остальной CSS-код */

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В этом примере для браузеров, которые не поддерживают флексбоксы, будет загружена запасная таблица стилей. Для всех остальных будут использованы стили, написанные ниже правила импорта.

Во время загрузки страницы браузер пройдёт по всем указанным в импортах путям и загрузит таблицы стилей. Затем прочитает правила ниже импортов и отрисует страницу на основании комбинации всего CSS.

💡 Желательно не злоупотреблять импортами. Потенциально это может замедлить загрузку страницы.

💡 Все импорты всегда должны быть в начале CSS-файла.

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

        
          
          @import url("https://fonts.googleapis.com/css2?family=Andika+New+Basic&display=swap");
          @import url("https://fonts.googleapis.com/css2?family=Andika+New+Basic&display=swap");

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать