Question

我试图转换更多＆＃34; advance＆＃34;混合从SASS到LESS但不成功。

这是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; } 
  }
}

另一个，我没有触及过这个：

@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构造（alhought mixins库，例如https://github.com/pixelass/more-or-less添加。if() (if - then - [else])），但是使用guards来创建条件mixins，另请参阅：http://lesscss.org/features/#mixin-guards-feature

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

你的mixins也使用你调用@content指令的@content;，我认为你应该将它与＆＃34;将规则集传递给Mixins＆＃34;，请参阅：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);

LESS是否具有与Sass中的@content指令相当的东西？

1 个答案: