Несколько файлов SCSS: как объявить переменные и распределить их по файлам

Чтобы объявить переменные для нескольких файлов SCSS (Sass), вы можете использовать следующие методы:

  1. Импорт файла переменных: создайте отдельный файл SCSS, содержащий все переменные, которые вы хотите использовать в нескольких файлах. Например, создайте файл с именем _variables.scssи определите там свои переменные. Затем в каждом файле SCSS, где вам нужен доступ к этим переменным, импортируйте файл _variables.scss, используя правило @importв начале файла.

    Пример:

    // _variables.scss
    $primary-color: #ff0000;
    $font-size: 14px;
    // main.scss
    @import 'variables';
    body {
     color: $primary-color;
     font-size: $font-size;
    }
  2. Использование директивы Sass @use: если вы используете Sass версии 3.6 или новее, вы можете использовать директиву @useвместо @import. Директива @useобеспечивает лучшую область видимости и предотвращает конфликты переменных.

    Пример:

    // _variables.scss
    $primary-color: #ff0000;
    $font-size: 14px;
    // main.scss
    @use 'variables';
    body {
     color: variables.$primary-color;
     font-size: variables.$font-size;
    }
  3. Создание примеси. Другой подход — определить примесь, содержащую все переменные, а затем включить эту примесь везде, где вам нужно использовать переменные.

    Пример:

    // _mixins.scss
    @mixin my-variables {
     $primary-color: #ff0000;
     $font-size: 14px;
    }
    // main.scss
    @import 'mixins';
    body {
     @include my-variables;
     color: $primary-color;
     font-size: $font-size;
    }

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