CSS颜色变量-在定义CSS颜色时需要使用规则或选择器

4xy9mtcn  于 2023-05-19  发布在  其他
关注(0)|答案(2)|浏览(187)

您好,我有以下问题:
“在定义CSS颜色时需要at-rule或选择器。”
我使用VS代码,我已经检查了CSS在https://jigsaw.w3.org/css-validator/validator#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;
  }
soat7uwm

soat7uwm1#

CSS验证器似乎有某种bug。如果你删除/* Color Variables */注解前的空格或者注解本身,它会显示错误--因为这不是CSS。
您正在使用Sass变量、规则语法和函数。您应该将文件命名为style.scss而不是style.css,以向大多数工具表明您的意图,如果您还没有配置Sass构建,则需要这样做。具体如何取决于你的工具的其余部分,但无论如何,都会有一个插件(例如。sass-loader for webpack)。

pu3pd22g

pu3pd22g2#

如果你问css变量用途:

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

如果你询问scss(sass)变量,试着使用插值:

$red: red;

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

阅读关于interpolation

但我认为你在css文件中使用scss的问题

相关问题