CSS3: Using both SCSS and CSS variables

I have two sets of variables:

/* CSS Variables */
:root {
    --black : #000000;
    --white : #FFFFFF;
    --primary : #2957C8;
}

and

/* SCSS variables from a variables.scss file */
$black: var(--black);
$white: var(--white);
$primary: var(--primary);

Both exist for some legacy reasons. In many existing scss files, I found

@import '~variables.scss';
div {
  background: $white;
  color: $primary;
}

I could go to every file, swapping the scss variables for the css ones:

div {
  background: var(--white);
  color: var(--primary);
}

What would be the pros of doing so ? I could eventually remove the variables.scss file. It would remove all the scss import

Do you see any other pros ?

The issue here being that this set of colors is actually way bigger and shared by hundred of different projects. So I need to be 100% sure, doing the swap would be beneficial.