LESS是否有类似于Sass中的@content指令？

我试图将一个更“先进”的mixin从SASS转换为LESS但不成功。LESS是否有类似于Sass中的@content指令？

这里是混入：

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

来源

2014-10-07 Maverick

检查在[this]中解释的方法（http://stackoverflow.com/questions/26163660/converting-a-sass-if-else-block-to-its-equivalent-in-less/26164200#26164200 ）答案有助于转换。 – Harry 2014-10-07 14:23:50

[这里]（http://codepen.io/hari_shanx/pen/ayIej）是一个从SASS到Less的样例转换。这与我在上述评论中提到的另一个问题非常相似，所以我没有添加单独的解释。如果您对理解有任何疑问，我会在答案中添加更多详细信息。 – Harry 2014-10-07 14:33:19

同时关注一个问题：您是否在考虑翻译“@ content”或“@ if”？ – cimmanon 2014-10-07 15:00:40

更新

我没有检查示例代码提供由@Harry在回答这个问题之前发表评论。这个示例代码提供了一个很好的方法来解决你的问题。另请参阅：http://codepen.io/hari_shanx/pen/ayIej

首先注意的if/else结构减不支持（alhought混入库如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

你也混入其中使用调用@content指令的@content;，我想你应该以“传递到规则集混入”比较这，请参阅：http://lesscss.org/features/#detached-rulesets-feature。

你的第一个混入使用模式匹配：

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

例如来电者：

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

你的第一个混入利用后卫：

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

而且你的第二个的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);

来源

2014-10-07 20:33:06

+1 mate。你也已经涉及到了对mixin的规则集的传递，因为这是我没有做过的事情。对未来的读者来说，了解如何使用mixin动态地分配规则，而不是使用规则集来创建静态变量，这会更有帮助。 – Harry 2014-10-08 02:30:35

LESS是否有类似于Sass中的@content指令？

回答

相关问题