VS Code CSS: как увидеть в подсказках переменные из другого файла?

Занимаюсь вёрсткой в качестве хобби, поэтому далеко не профи. Делаю себе лендинг, все цвета вынес в переменные в файл root_var.css

:root{
    /* key colors for all website */
    --key-back-color: rgb(20, 20, 20);
    --key-elem-color: black;
    --key-elem-op-color:  rgba(0, 0, 0, 0.5);
    --key-act-color:rgb(0, 255, 0);
    --key-act-shd-color: rgba(0, 240, 0, 0.8);

    /* animated background icons */
    --icon-act-transition: 0.6s;

}

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

html, body {
    color: ivory;
    
    background-color: var(--key-back-color);
    
    height: 100%;
    width: 100%;
}

При попытке вставить цвет через var() редактор ни в какую не хочет показывать мне существующие записи из других файлов, в частности из этого. Однако, PyCharm так может(у него и подсмотрел), выдавая предложения со всего проекта, причём не только для CSS.

Вообще возможно сделать так, чтобы подобный набор мне выпадал в любом месте, а не только там, где уже отметились названия?

upd: Ну и в догонку: есть расширение, показывающее в подсказках цвета? Опять же, в PyCharm видел, что возле снипета висит квадратик, раскрашенный в записанный цвет.