使用Less创建文本危险的默认样式

所以我很少使用Less文件来改进我的CSS，我目前有一个panel.less文件，其中包含用于创建面板的所有CSS我的页面。使用Less创建文本危险的默认样式

我正在寻找某种方式使其无论何时将文本危险类应用于面板div，它都将font-color更改为白色而不是红色。

.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) 
{ 
    border-color: @border; 

    & > .panel-heading { 
     color: @heading-text-color; 
     background-color: @heading-bg-color; 
     border-color: @heading-border; 

     + .panel-collapse > .panel-body { 
      border-top-color: @border; 
     } 

     .badge { 
      color: @heading-bg-color; 
      background-color: @heading-text-color; 
     } 
    } 

    & > .panel-body { 
     color: @gray-dark; 

     + .text-danger { 
      color: @heading-text-color; 
     } 
    } 

    & > .panel-footer { 
     + .panel-collapse > .panel-body { 
      border-bottom-color: @border; 
     } 
    } 
}

以上是我在Less文件中使用的代码，我在做什么错误？

的HTML应该是这样的，虽然没有什么帮助：

<div class="panel panel-body text-danger"> ERROR! </div>

来源

2015-10-20 Connor McGill

你的HTML标记？当'div'里面有文本危险类时，应该改变它的字体颜色？面板或身体或只是具有该类的元素？ – Harry

为什么在'.text-danger'之前使用+号？这个选择器意味着它将定位所有在'.panel-body'之后立即放置的'.text-danger'元素。 – makshh

我想将显示红色文字的文本危险样式更改为在面板内部显示白色文本。 –

基于在评论中给出的HTML，所有的三类应用到同一个元素，而不是不同的兄弟姐妹或子元素。因此，你更少的代码应该如下修改：

修改减：（我忽略，则其他部分保持简单）

&.panel-body { 
    color: #777; 
    &.text-danger { 
    color: @heading-text-color; 
    } 
} 

/* mixin call */ 
.panel{ 
    .panel-variant(1px; #fff; #0f0; #00f); 
}

编译CSS输出：

.panel.panel-body.text-danger { 
    color: #ffffff; 
}

你原来的代码有后代选择器（对于.panel-body）和相邻的si金光闪闪的.text-danger选择（+），只有当标记如下：将工作：

相邻的兄弟选择（+）只当标记是这样的：

<div class='panel'> 
    <div class='panel-heading'>Heading</div> 
    <div class='panel-body'>Body</div> 
    <div class='text-danger'>Some alert text</div> 
</div>

来源

2015-10-20 14:06:50 Harry

使用Less创建文本危险的默认样式

回答

相关问题