This may not seem intuitive from a naming perspective, but font-lock-variable-name-face is already used for CSS properties. That makes it harder to distinguish between properties and variables.

AFAIK, Sass doesn't even have constants, so I don't see much harm in using this face. It'd be a less dramatic change for those who have grown used to variable coloring for CSS properties.

I guess the alternative would be to inherit the property face from something else, to free up the face for real variables. But then what do we use for properties? (Inheriting from nothing doesn't look good IMO.)

Attached is the proposed patch.