Question

我有很多相同的css代码适用于不同的html元素

e.g。以下代码写了大约100次

{{1}}

是否可以创建类似的类，只需将此类添加到html元素中，因此每次只有一行而不是5行。

逗号分开是不可能有很多元素。

我搜索了谷歌，但没有找到符合我问题的任何内容。

感谢您的回答：）

Answer 1

我即将发布的第一个选项已经因某种原因被发布和删除。不知道为什么，它完全有效。

您可以创建一个类以应用于所有受影响的元素：

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

<div class="flex"></div>
<div></div>
<div class="flex"></div>

或者您可以使用像LESS这样的CSS预处理器。你可以用LESS做几件事。首先，extend：

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.selector-1 {
    &:extend( .flex );
    /* custom styles here */
}
.selector-2 {
    &:extend( .flex );
    /* custom styles here */
}
.selector-3 {
    &:extend( .flex );
    /* custom styles here */
}

以上输出：

.flex,
.selector-1,
.selector-2,
.selector-3 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.selector-1 {
    /* custom styles here */
}
.selector-2 {
    /* custom styles here */
}
.selector-3 {
    /* custom styles here */
}

或者您可以使用mix-in：

.flex() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.selector-1 {
    .flex;
    /* custom styles here */
}
.selector-2 {
    .flex;
    /* custom styles here */
}
.selector-3 {
    .flex;
    /* custom styles here */
}

以上输出：

.selector-1 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* custom styles here */
}
.selector-2 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* custom styles here */
}
.selector-3 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* custom styles here */
}

为相同的css代码添加组

1 个答案: