less - LESS 是否有类似于 Sass 中的 @content 指令的东西？

Question

我试图将一个更“高级”的 mixin 从 SASS 转换为 LESS 但没有成功。

这是混音:

.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; } 
  }
} 

还有一个，我没碰这个:

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

Answer 1

更新

在回答这个问题之前，我没有查看@Harry 在评论中提供的示例代码。此示例代码也提供了一种很好的干净方法来解决您的问题。另请参阅:http://codepen.io/hari_shanx/pen/ayIej

首先请注意，Less 不支持 if/else 构造(尽管混合库如 https://github.com/pixelass/more-or-less 添加了 .if() (if - then - [else]) )，但使用守卫来创建条件混入，另见:http://lesscss.org/features/#mixin-guards-feature

或者考虑 http://lesscss.org/features/#mixins-parametric-feature-pattern-matching

您的 mixins 还使用 @content;，您称之为 @content 指令，我认为您应该将其与“将规则集传递给 Mixins”进行比较，请参阅:http://lesscss.org/features/#detached-rulesets-feature .

你的第一个使用模式匹配的 mixin:

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

调用者示例:

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

你的第一个 mixins 利用守卫:

.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;}});

还有你的第二个混音:

.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);