CODEWITHSUNDEEP
lessmixins
Maverick
Maverick

Reputation: 886

Does LESS have something comparable to the @content directive in Sass?

I tried to convert a more "advance" mixin from SASS to LESS but unsuccessful.

Here is the mixin:

.breakpoint(@point) {
  @if @point == really big{
    @media (max-width: 80em) { @content; } 
  }
  @if @point == mid {
    @media (max-width: 60em) { @content; }
  }
  @if @point == small {
    @media (max-width: 42em) { @content; } 
  }
}

and another one, I didn't touch this one:

@mixin keyframes( $animationName )
{
    @-webkit-keyframes $animationName {
        @content;
    }
    @-moz-keyframes $animationName {
        @content;
    }
    @-o-keyframes $animationName {
        @content;
    }
    @keyframes $animationName {
        @content;
    }
}

Upvotes: 4

Views: 2864

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

update

I did not check the sample code provide by @Harry in the comments, before answering this question. This sample code provide a good a clean way to solve your question too. Please also see: http://codepen.io/hari_shanx/pen/ayIej

First notice that Less do not support if / else constructs (alhought mixins libraries such as https://github.com/pixelass/more-or-less adds .if() (if - then - [else]) ), but uses guards to create conditional mixins, also see: http://lesscss.org/features/#mixin-guards-feature

or alternatively consider http://lesscss.org/features/#mixins-parametric-feature-pattern-matching

Your mixins also use the @content; which you call the @content directive, i think you should compare this with "Passing Rulesets to Mixins", see: http://lesscss.org/features/#detached-rulesets-feature.

Your first mixin using pattern-matching:

.breakpoint(reallybig;@content)
{
@media (max-width: 80em) { @content(); }
}
.breakpoint(mid;@ruleset)
{
@media (max-width: 80em) { @content(); }
}

example caller:

.breakpoint(reallybig; {p{color:red;}});

Your first mixins leveraging guards:

.breakpoint(@size;@content) when (@size = 'really big')
{
@media (max-width: 80em) { @content(); }
}
.breakpoint(mid;@ruleset) when (default())
{
@media (max-width: 80em) { @content(); }
}


.breakpoint('really big'; {p{color:red;}});

And your second mixin:

.keyframes(@animationName;@animation)
{
    @-webkit-keyframes @animationName {
        @animation();
    }
    @-moz-keyframes @animationName {
        @animation();
    }
    @-o-keyframes @animationName {
        @animation();
    }
    @keyframes @animationName {
        @animation();
    }

}


@animation: {0% {
    left: 0;
    transform: translate(10px, 20px);
  }
  100% {
    left: 100%;
    transform: translate(100px, 200px);
  }};

.keyframes(test;@animation);

Upvotes: 6

Related Questions