較少-定義與Mixin沖突的類名

Question

我遇到的問題很簡單。 我想使用先前已定義為mixin的CSS類名稱。

我目前正在使用Bootstrap ，它已定義了一個稱為“占位符”的混合，並且由於向后兼容，我們正計划使用jQuery占位符插件來支持IE 9的占位符。問題是該插件添加了css類“占位符”。

如何在我的LESS文件中定義css類“占位符”而不執行先前在Bootstrap中定義的mixin？

Answer 1

這應該不是問題。 這是bootstrap的占位符mixin

// Placeholder text
.placeholder(@color: @input-color-placeholder) {
  &:-moz-placeholder            { color: @color; } // Firefox 4-18
  &::-moz-placeholder           { color: @color;   // Firefox 19+
                              opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

這不是mixin類，因為它后面帶有括號。 因此，除非被引用，否則它將不會輸出任何內容。 要使用此功能，我需要執行以下操作。

.input {
    .placeholder;
}

因此，這不會干擾您可能擁有的任何.placeholder類。

.placeholder {
    color: red;
}

兩者應該愉快地並存，並且您不會遇到任何問題。

編輯：查看評論

解決方案是使用多類選擇器來解決該問題。

例

.input.placeholder {
    color: red;
}