html - 为相同的 css 代码添加组

Question

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

例如下面的代码大约写了100次

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

是否可以像创建一个类一样将这个类添加到 html 元素中，所以每次只有一行而不是 5 行。

逗号分隔是不可能的，因为元素太多了。

我在 Google 上进行了搜索，但没有找到与我的问题相符的内容。

谢谢你的回答:)

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 */
}