CSS 색상 변수 - CSS 색상을 정의할 때 규칙 또는 선택기가 필요합니다.

Question

안녕하세요. 다음과 같은 문제가 있습니다:

"CSS 색상을 정의할 때 at-rule 또는 선택기가 필요합니다."

저는 VS Code를 사용하고 있으며 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;
  }

Answer 1

CSS 유효성 검사기에 일종의 버그가 있는 것 같습니다. /* Color Variables */ 주석이나 주석 자체 앞의 공백을 제거하면 CSS가 아니기 때문에 오류가 표시됩니다.

당신은 Sass 변수, 규칙 구문 및 함수를 사용하고 있습니다. 대부분의 도구에 의도를 알리기 위해 파일 이름을 style.scss 而不是 style.css 지정해야 하며, Sass 빌드를 아직 구성하지 않은 경우 이 작업을 수행해야 합니다. 정확한 작동 방식은 나머지 도구에 따라 다르지만, 무슨 일이 있어도 플러그인이 있을 것입니다(예: webpack의 sass 로더).