SASS＆LESS - 擴展一個獨立的類

只是想知道是否存在任何方式來擴展前兩個分隔的類，或者存在任何其他選項，如創建特定類 .background{background:red}並將其用作擴展而不是一個分離的類（但我不想在CSS中輸出一個類.background）。SASS＆LESS - 擴展一個獨立的類

實施例：

SASS：

.foo { 
    background:red 
} 
.foo { 
    color:red 
} 
.bar { 
    @extend .foo; 
} 
.foo { 
    font-size: 16px 
}

LESS：

.foo { 
    background:red 
} 
.foo { 
    color:red 
} 
.bar { 
    &:extend(.foo); 
} 
.foo { 
    font-size: 16px 
}

在CSS的輸出將是：

.foo, .bar { 
    background: red; 
} 

.foo, .bar { 
    color: red; 
} 

.foo, .bar { 
    font-size: 16px; 
}

但我想是這樣的：

.foo, .bar { 
    background: red; 
} 

.foo, .bar { 
    color: red; 
} 

// No .bar class here 

.foo { 
    font-size: 16px; 
}

我應該遵循什麼方法，使這種情況發生？

來源

2016-12-14 Jozi Bashaj

你的遺產已經倒退了。 bar不延長foo，foo擴展bar：

_LESS：

.bar { 
    background-color: red; 
} 

.bar { 
    color: red; 
} 

.foo { 
    &:extend(.bar); 
    font-size: 16px; 
}

主要生產

_CSS：

.bar, 
.foo { 
    background-color: red; 
} 
.bar, 
.foo { 
    color: red; 
} 
.foo { 
    font-size: 16px; 
}

來源

2016-12-14 14:16:50 zzzzBov

難道你是不是也將二者結合起來'.bar'聲明在LESS代碼到一個選擇器？ – TylerH

@TylerH，是的，但我儘可能接近OP的例子。 – zzzzBov

嗨zzzzBov，謝謝你的回覆！我可能創造了錯誤的問題，但是，我想要一些不同的東西。在你的LESS代碼中，你把'font-size'放在類'.foo'中，你的** expand **規則只擴展''.bar'類（我知道這一點）。但我想知道我們是否可以在不加載所有分離的'.bar'的情況下展開**，只在加載之前加載兩個**擴展**調用它而另一個底部不加載**展開** ...希望你明白我真的想要什麼:) –

SASS＆LESS - 擴展一個獨立的類

回答

相關問題