gpt4 book ai didi

html - CSS 设计系统

转载 作者:行者123 更新时间:2023-11-28 01:13:19 25 4
gpt4 key购买 nike

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

的类
.text-red {color: red}

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

更新:这就是我到目前为止生成颜色的方式 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com