嗨，我有以下問題:

"定義CSS顏色時需要at-rule或選擇器。"

我正在使用VS代碼，我已經檢查了https://jigsaw.w3.org/css-validator/validator#css的CSS

我不知道這是什么問題！

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

CSS驗證器似乎有某種缺陷。如果您刪除/* Color Variables */ comment前面的空格或注釋本身，它會顯示錯誤——這是應該的，因為這不是CSS。

您正在使用Sass變量、規則語法和函數。您應該將文件命名為style.scss而不是style.css，以向大多數工具表明您的意圖，如果您還沒有配置Sass構建，您將需要這樣做。具體如何取決于工具的其余部分，但無論如何，都會有一個插件(例如webpack的sass-loader)。

如果您詢問css變量，請使用:

:root{
 --color-red: red;
}
.class{
  color: var(--color-red);
}

如果您詢問scss(sass)變量，請嘗試使用插值法:

$red: red;

.class{
  color: #{$red};
}

閱讀內插法

但是我認為問題是你在css文件中使用了scss