CSS-Farbvariablen – Beim Definieren von CSS-Farben sind Regeln oder Selektoren erforderlich

Question

Hallo, ich habe folgendes Problem:

„Beim Definieren von CSS-Farben ist eine at-Regel oder ein Selektor erforderlich.“

Ich verwende VS-Code und habe das CSS unter https://jigsaw.w3.org/css-validator/validator#css überprüft

Ich weiß nicht, was das Problem ist!

/* 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

CSS 验证器似乎有某种错误。如果您删除 /* Color Variables */ 注释或注释本身之前的空格，它会向您显示错误 - 正如它应该的那样，因为这不是 CSS。

您正在使用 Sass 变量、规则语法和函数。您应该将文件命名为 style.scss 而不是 style.css 来向大多数工具表明您的意图，如果您尚未配置 Sass 构建，则需要要做到这一点。具体如何取决于您的工具的其余部分，但无论如何，都会有一个插件（例如 webpack 的 sass 加载器）。