Question

假设我有以下css类

.class1
{
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    height: 21px;
    border-color: #F5E0C4;
}

.class2
{
    font-weight: bold;
    padding: 0px 3px 3px 4px;
    margin-bottom: 5px;
    border-bottom: 1px solid #e2ccab;
    border-color: #F5E0C4;
}

.class3
{
   border-color: #F5E0C4;
   font-weight: bold;
   font-size: 14px;
   background-image: linear-gradient(180deg,#314d8a,#93aee8);
}

这里所有上面的类都使用相同的border-color: #F5E0C4;，因为这个border-color在类中重复;我想将它保持分开，并且通常用于所有上述类，所以如果我想改变颜色的任何时间点，我应该只在一个地方改变。

我用谷歌搜索了但是我只有一种方法，就是在这样的元素上应用多个css类。

.classBorder
{
  border-color: #F5E0C4;
}

<div class="class1 classBorder"> 
</div>
<div class="class2 classBorder"> 
</div>
<div class="class3 classBorder"> 
</div>

如果有可能，请建议我任何其他方法。

Answer 1

您也可以使用LESS

.classBorder
{
  border-color: #F5E0C4;
}

.class1
{
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    height: 21px;
    .classBorder;
}

.class2
{
    font-weight: bold;
    padding: 0px 3px 3px 4px;
    margin-bottom: 5px;
    border-bottom: 1px solid #e2ccab;
    .classBorder;
}

.class3
{
   .classBorder;
   font-weight: bold;
   font-size: 14px;
   background-image: linear-gradient(180deg,#314d8a,#93aee8);
}

参考 - Less Link

Answer 2

您可以选择所有这三个类：

.class1, .class2,  .class3 {    
  border-color: #F5E0C4;    
}

Answer 3

您可以选择所有课程，只需：

.class1, .class2, .class3 { border-color: #F5E0C4; }

Answer 4

或者你可以简单地使用这样的东西：

.class1, .class2, .class3 {
 border-color: #F5E0C4;
}
    .class1 {
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    height: 21px;
}

.class2
{
    font-weight: bold;
    padding: 0px 3px 3px 4px;
    margin-bottom: 5px;
    border-bottom: 1px solid #e2ccab;
}

.class3
{
   font-weight: bold;
   font-size: 14px;
   background-image: linear-gradient(180deg,#314d8a,#93aee8);
}

Answer 5

您可以尝试使用CSS3变量。类似的东西：

:root {
    --main-border-color: #F5E0C4;
}

.class1
{
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    height: 21px;
    border-color: var(--main-bg-color);
}

为所有其他css类

5 个答案: