文章/答案/技术大牛

发布

问CSS设计系统
EN

Stack Overflow用户

提问于 2018-08-24 01:53:02

回答 1查看 100关注 0票数 0

我正在考虑制作一个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%); 
    }
}

html

css

design-patterns

回答 1

Stack Overflow用户

发布于 2018-08-24 02:38:28

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

.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>

这还不够好吗？

或者这是不是太劳动密集型了？

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51991633

复制

相似问题

问CSS设计系统
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS设计系统EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS设计系统
EN