@content block in mixins, Sass vs Less css

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

Leave a Reply

  • (will not be published)