After writing out this simplified Less script
.placeholder(@color: #333333) {
&::-webkit-input-placeholder { color: @color; }
}
input {
.placeholder();
}
.placeholder {
margin-top: 20px;
}
When I compile this code using my local compiler or the winless online less compiler, the generated output is as follows:
input {
margin-top: 20px;
}
input::-webkit-input-placeholder {
color: #333333;
}
.placeholder {
margin-top: 20px;
}
Instead of the expected result which should be:
input::-webkit-input-placeholder {
color: #333333;
}
.placeholder {
margin-top: 20px;
}
Is this a bug in the compiler or am I overlooking something in my code?
Based on the outcome, it appears that having CSS selectors with the same name as mixins with default values may be causing the issue.
This problem arises when I try to compile Bootstrap along with my custom code. Although I can find workarounds for now, in the long run, managing mixins with default values could become cumbersome as the project expands to include more components from other sources.
Edit: Upon revisiting the documentation and the information provided on the first page of the docs, I realize that every element can be treated as a mixin in Less.