CSS Color Variables - Rules or selectors are required when defining CSS colors

Question

Hello, I encountered the following problem:

"An at-rule or selector is required when defining CSS colors."

I'm using VS Code and I've checked the CSS at https://jigsaw.w3.org/css-validator/validator#css

I don’t know where the problem is!

/* Color Variables */
$red: red;
$green: green;
$orange: orange;
$blue: blue;
$purple: purple;
$white: white;
$black: black;
$bg: /* #eff3f6 */ #e3e5e6;
$darkgray-blue: #354052;
$lightgray-blue: #7f8fa4;

/* Styles */
body {
  background: $bg;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
}

.text-red {color: $red !important;}
.text-green {color: $green !important;}
.text-orange {color: $orange !important;}
.text-blue {color: $blue !important;}

/* buttons */
.btn-red {
  background: $red;
  color: $white;
  font-size: xx-small;
  &:hover, &:focus {
    background: darken($red, 8%);
    color: white;
  }

Answer 1

There seems to be some kind of bug with the CSS validator. If you remove the whitespace before the /* Color Variables */ comment or the comment itself, it will show you an error - as it should, since this is not CSS.

You are using Sass variables, rule syntax, and functions. You should name your file style.scss instead of style.css to signal your intent to most tools, which you will need to do if you haven't configured your Sass build yet . Exactly how that works depends on the rest of your tooling, but no matter what, there will be a plugin (like webpack's sass loader).