Less - 定义与mixin冲突的类名

Question

我遇到的问题非常简单。我想使用之前被定义为mixin的css类名。

我目前正在使用Bootstrap，它定义了一个名为“占位符”的mixin，由于向后兼容性，我们计划使用jQuery placeholder plugin来支持IE 9的占位符。问题是这个插件将css类“占位符”添加到DOM元素。

如何在不执行之前在Bootstrap中定义的mixin的情况下在LESS文件中定义css类“占位符”？

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;
}