Less - Defining a class name that conflicts with mixin

Question

The problem that I've got is quite simple. I want to use a css class name that has been previously defined as a mixin.

I'm currently using Bootstrap , which has defined a mixin called "placeholder", and because of backwards compatibility we're planning to use the jQuery placeholder plugin to support placeholders for IE 9. The problem is that this plugin adds the css class "placeholder" to the DOM element.

How do I define the css class "placeholder" in my LESS file without executing the mixin previously defined in Bootstrap?

Answer 1

This should not be a problem. This is bootstrap's placeholder 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
}

This is not a mixin class, as it has parenthesis after it. Therfore it will not output anything unless it is referenced. To use this I would need to do something like this.

.input {
    .placeholder;
}

Therefore this will not interfere with any .placeholder class you may have.

.placeholder {
    color: red;
}

The two should happily co-exist and you should not get any problems.

Edit: see comments

The solution was to use multi class selector to overcome the issue.

Example

.input.placeholder {
    color: red;
}