Question

是否有工具可以组合CSS类？将它们合并到Tailwind CSS中似乎很方便，但是有没有办法在CSS中“添加”它们呢？ Sass的@extend类似于我的想法。但是那里有什么看起来像这样：

HTML：

<div class="author"></div>

CSS：

.card {with: 100px; height: 100px;}
.green (background-color: green}

.author { .card + .green }

或者也许

.author = .card.green

然后有了更多的类，结果将是这样：

.author, 
.staff, 
.jockey = .card.green.padding-large.centered.motif-top

这存在吗？

Answer 1

您可以在Less.css的帮助下进行操作。只需将此<script>标记添加到您的HTML文件中即可：

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" ></script>

并向外部样式表中添加<link>，这是不需要的（但是，如果在外部文件.less中而不是在HTML的<style>标记中编写，则Less的bug更少））：

<link rel="stylesheet/less" type="text/css" href="styles.less" />

现在，您提供的此示例：

.card {width: 100px; height: 100px;}
.green (background-color: green}

.author { .card + .green }

可以用Less编写为：

.card {
    width: 100px;
    height: 100px;
}

.green {
    background-color: green;
}

.author {
    .card();
    .green();
}

第二个示例：

.author, 
.staff, 
.jockey = .card.green.padding-large.centered.motif-top

用更少的形式写成：

.author, .staff, .jockey {
    .card();
    .green();
    .padding-large();
    .centered();
    .motif-top();
}

希望这对您有所帮助，请转到official website，以了解有关Less CSS（ Le arner S 类型 S heets）

Answer 2

这是纯CSS方式，但是语法略有不同，您不需要第一行：

.author {} /* 1st line is not required*/

.author, .class1 {
  width: 100px;
}
.author, .class2 {
  height: 100px;
  background-color: black;
}

<div class="author"><div>

此处有更多信息：Can a CSS class inherit one or more other classes?

结合CSS和非HTML中的类

2 个答案: