Импортировать переменную из css в scss

Question

Идея проста, объявить переменную в. css и использовать ее в файле .s css.

index. css

:root {
  --primary: rgb(65, 120, 95);
}

variable.s css

@import './index';

$color: var(--primary);


.my-color: {
  color: $color
}

не работает. Я знаю, что если вы делаете

$primary: rgb(65, 120, 95);

.my-color: {
  color: $color
}

работает.

Но я хочу установить переменные в файле css. Спасибо

Answer 1

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

Лучше всего сделать index.css в другом файле S CSS, а затем объявить переменные в variable.scss. Затем импортируйте variable.scss в index.scss, который теперь будет иметь доступ ко всем переменным. Вам просто нужно изменить ссылки на файлы, чтобы они указывали на index.scss.

См. Ниже.

variables.s css

$primary: rgb(65, 120, 95);

index.s css

@import "/variables";

.my-color: {
  color: $primary
}