There are numerous discussions on Sass Vs Less out there, I am not getting into that. In this article I will just discuss the practical usecase of @content in Sass mixins, Less do not have anything like that and how we can find a workaround for Less
Update 10-04-2014: feature released in lesscss v1.7.0, we can now pass rulesets to mixins
Let us take the placeholder styling:
::-webkit-input-placeholder {
color: #666;
}
:-moz-placeholder { /* Firefox 18- */
color: #666;
}
::-moz-placeholder { /* Firefox 19+ */
color: #666;
}
:-ms-input-placeholder {
color: #666;
}
.placeholder, .watermark { /* placeholders via jQuery plugins for older versions of IE */
color: #666;
}
Now generating a mixin for this can be really tricky. When writing a placeholder mixin, we are uncertain of the number of css rules coming up. Here @content helps you. We can create and use it like this:
@mixin placeholder {
&::-webkit-input-placeholder {
@content;
}
&:-moz-placeholder { /* Firefox 18- */
@content;
}
&::-moz-placeholder { /* Firefox 19+ */
@content;
}
&:-ms-input-placeholder {
@content;
}
&.placeholder, &.watermark { /* placeholders via jQuery plugins for older versions of IE */
@content;
}
}
@include placeholder {
font-style: italic;
color: #999;
font-weight: 100;
}
Now as Less completely misses the @content or similar feature, we can not make a workaround directly. There are many unconventional methods listed down in this thread. https://github.com/less/less.js/issues/965 . This is an open issue for official implementation of a feature.
Update 10-04-2014: feature released in lesscss v1.7.0, we can now pass rulesets to mixins