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