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