嗨，我有以下問(wèn)題:

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

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

我不知道這是什么問(wèn)題！

/* 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驗(yàn)證器似乎有某種缺陷。如果您刪除/* Color Variables */ comment前面的空格或注釋本身，它會(huì)顯示錯(cuò)誤——這是應(yīng)該的，因?yàn)檫@不是CSS。

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

如果您詢(xún)問(wèn)css變量，請(qǐng)使用:

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

如果您詢(xún)問(wèn)scss(sass)變量，請(qǐng)嘗試使用插值法:

$red: red;

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

閱讀內(nèi)插法

但是我認(rèn)為問(wèn)題是你在css文件中使用了scss