html - CSS设计系统 | 设计系统

我正在考虑制作一个CSS设计系统，其中包括类似

.text-red {color: red}

我非常困惑，我喜欢设计系统方法，但是异常是一个大问题。

更新：这就是我到目前为止产生颜色的方式
Background Utilities Via SCSS @each

悬停在某个元素上时，我想使其动态变暗或变亮。我当时想创建一个像.darken或.lighten这样的类，并且让它减少一定数量的颜色，我是否会继承该颜色并使用-50％之类的东西呢？

我想我可以创建10个带有继承作为背景颜色的实用程序，然后减少一定数量，例如50％或25％

但是，这如何在悬停时起作用。

更新：
到目前为止，这是我所需要的，不是有效的，而是我想要的硬编码颜色

//Base Background Colour
@each $name, $colour in $colours {
    .background-#{$name} {
        background-color: $colour;
    }
}
//Darken Background Colour
@each $name, $colour in $colours {
    .background-#{$name}-light {
        background-color: lighten($colour,10%);
    }
}

@each $name, $colour in $colours {
    .background-#{$name}-dark {
        background-color: darken($colour,10%);
    }
}

最佳答案

例如，您可以添加一个额外的类名：

.text-red {
  color: red;
  font-family: ebrima;
}

.text-red.darker {
  color: rgb(110, 20, 20);
}

<html>
<head>


</head>
<body>

<h1 class="text-red darker">Hello there, I'm text!</h1>

<h1 class="text-red">I'm also text!</h1>


</body>
</html>

那还不够好吗？

还是那样会占用大量劳动力？

关于html - CSS设计系统，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51991633/