Variables de couleur CSS - Des règles ou des sélecteurs sont requis lors de la définition des couleurs CSS

Question

Bonjour, j'ai le problème suivant :

"Une règle at ou un sélecteur est requis lors de la définition des couleurs CSS."

J'utilise VS Code et j'ai vérifié le CSS sur https://jigsaw.w3.org/css-validator/validator#css

Je ne sais pas quel est le problème !

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

Il semble y avoir une sorte de bug dans le validateur CSS. Si vous supprimez le commentaire /* Color Variables */ ou l'espace avant le commentaire lui-même, une erreur s'affichera - comme il se doit, car ce n'est pas du CSS.

Vous utilisez des variables Sass, une syntaxe de règles et des fonctions. Vous devez nommer votre fichier style.scss 而不是 style.css pour signaler votre intention à la plupart des outils, et vous devrez le faire si vous n'avez pas encore configuré votre build Sass. La façon exacte dont cela fonctionne dépend du reste de vos outils, mais quoi qu'il en soit, il y aura un plugin (comme le chargeur sass de webpack).