较少-定义与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;
}