使用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創建文本危險的默認樣式

回答

相關問題