CSS - 較少的類繼承

我使用twitter bootstrap中的樣式，並且有關於繼承的問題。CSS - 較少的類繼承

我想製作兩個標籤類，它們會從引導程序繼承標籤樣式。

.label-new { 
    .label; .label-important; 
} 
.label-updated { 
    .label; .label-warning; 
}

然而，以上將導致LESS分析錯誤「NameError：.label-重要是未定義」，因爲.label重要和.label警告正在使用限定在自舉以下：

.label, 
.badge { 
    // Important (red) 
    &-important   { background-color: @errorText; } 
    &-important[href] { background-color: darken(@errorText, 10%); } 
    // Warnings (orange) 
    &-warning   { background-color: @orange; } 
    &-warning[href]  { background-color: darken(@orange, 10%); } 
}

是否有任何特殊的語法來繼承.label-important/warning？

在此先感謝。

來源

2012-05-08 Cat

我相信_just_在你的兩個新類中的'.label'中混合會給你'.lable-new-important'和'.label-new-warning'（等等）。我猜你只想'new'的'important'屬性和'updated''的'warning'屬性是你的目標？ – ScottS

是的，這是正確的。而且我不想重新定義下面建議的顏色。所以這似乎是LESS的一個限制不幸的。 – Cat

是的，它看起來像是一個有用的功能。如果您不想在兩個地方使用顏色定義，我已經添加了另一個建議。這是我唯一的兩個建議。 – ScottS

我認爲你只能繼承.label這應該給.label-new-important和.label-new-warning（和等效的updated）。如果這不是需要的，並且您希望添加新的擴展名，則可能需要再次直接爲.label定義顏色以隔離並定義您想要的內容。像這樣：

.label { 
    // New (red) 
    &-new   { background-color: @errorText; } 
    &-new[href]  { background-color: darken(@errorText, 10%); } 
    // Updated (orange) 
    &-updated  { background-color: @orange; } 
    &-updated[href] { background-color: darken(@orange, 10%); } 
}

EDIT（如果你不想重新定義顏色，但用一個mixin）

爲了避免顏色的重新定義，那麼你需要改變原來的定義，而做到這一點：

首先，刪除原來的.label和.badge定義，然後第二個，更明確地定義它們像這樣：

.label-important, 
.badge-important { 
    // Important (red) 
    { background-color: @errorText; } 
    { background-color: darken(@errorText, 10%); } 
} 

.label-warning, 
.badge-warning { 
    // Warnings (orange) 
    { background-color: @orange; } 
    { background-color: darken(@orange, 10%); } 
} 

.label-new { 
    .label-important; 
} 

.label-updated { 
    .label-warning; 
}

來源

2012-05-08 19:32:44 ScottS

CSS - 較少的類繼承

回答

相關問題