Угловой импорт глобальных переменных SCSS

Я не думаю, что вам нужно импортировать переменную scss везде, где вы хотите ее использовать

Предположим, у вас есть файл

_variables.scss

$white:#fff;
$black:#000;

затем в main.scss вы можете импортировать этот файл

main.scss

@import "variables.scss";

Теперь предположим, что вы хотите использовать эти переменные, например, в файле _button.scss.

_button.scss

button{
 color:$black
}

Вы можете напрямую использовать эти переменные при условии, что вы импортируете файл _button.scss в файл main.scssпослеvariable.scss

Размещение его после файлов varibles.scss гарантирует, что переменные будут доступны в файле button.scss.

main.scss

@import "variables.scss";
@import "button.scss";

Что касается переменных CSS, вы можете использовать их SCSS,

попробуйте запустить следующий фрагмент в Sassmeister

:root{
  --gridWidth: 45px; 
  --gridHeight: 45px; 
}

.Grid {
    width: var(--gridWidth);
    height: var(--gridHeight);
    border: 1px solid black;
}

Вам не нужно каждый раз импортировать переменные, рассмотрите этот пример.

theme.scss

$primary-color:#00b289;
$secondary-color:#505050;

@import "components/_checkbox";
@import "components/_button";

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

другой способ - создать частичный файл sass, включающий все ваши переменные и импортированный один раз

theme.scss

@import "_variables.scss";
@import "components/_checkbox";
@import "components/_button";