4

我一直在尝试让以下受保护的 mixin 在我们的 LESS 样式表中正常工作：

#font {
    .body( @size: 15px, @lineHeight: 18px, @weight: normal ) {
        font: @weight @size~"/"@lineHeight Arial, sans-serif;
    }
    .marginLeft( @margin ) when ( @margin = 0 ) { }
    .marginLeft( @margin ) when not ( @margin = 0 ) {
        margin-left: @margin;
    }
    .marginTop( @margin ) when ( @margin = 0 ) { }
    .marginTop( @margin ) when not ( @margin = 0 ) {
        margin-top: @margin;
    }
    .DinBold( @size: 14px, @lineHeight: 20px, @offsetTop: 0, @offsetLeft: 0 ) {
        #font > .marginLeft( @offsetLeft );
        #font > .marginTop( @offsetTop );
        font: @size~"/"@lineHeight 'DINBold', Arial, sans-serif;
    }
}

这里的想法是，如果任何字体偏移量为零，我不希望设置边距样式。现在，当两个参数不为零时，它可以正常工作，例如：

#font > .DinBold( 42px, 42px, -7px, -3px );

但是@offsetLeft 为 0 的那一刻，无论是显式的还是隐式的：

#font > .DinBold( 42px, 42px, -7px );

或者

#font > .DinBold( 42px, 42px, -7px, 0 );

似乎即使是margin-top也不会暴露。如果你翻转它，将marginTop mixin 放在marginLeft mixin 之前，并为@offsetTop 传递0，这似乎向我暗示，第一次命中空mixin 时，所有后续的mixin 调用可能会发生同样的事情忽略 - 对此有任何见解吗？

4

2 回答 2

1

我一直在努力解决同样的问题，重新编写了一些用lessphp编译好的LESS，但不是用lessjs。似乎空的 mixin 会阻止同一规则集中的所有后续 mixin 或包含 mixin 的渲染。但是将任何内容放入空的 mixin 中，一切正常。

因此，简单的解决方案是将 LESS 注释 (//) 放在空的 mixin 中，令我惊讶的是这很好用。只有两个简单的正斜杠在他们自己的行上，没有别的，LESS 注释不会在输出 CSS 中呈现，所以你有你的空 mixin。

于 2012-05-17T18:46:13.677 回答
0

我放弃了以前的答案，因为它们不适合你。我很惊讶它们不起作用，因为LESS 信息似乎表明它应该能够处理非零情况。

然而，我有一个新的想法，基于模式匹配。试试下面的。它旨在允许您在没有设置边距的情况下只传入两个参数，或者四个参数，但第三个参数可以是“top”或“left”，以允许第四个参数只设置一个或另一个，或者您可以传递两个数字并设置顶部和左侧（按该顺序）。这样可以避免调用.marginLeft/Topif 不需要，并接受 a0如果您选择传入一个。

#font {
    .body( @size: 15px, @lineHeight: 18px, @weight: normal ) {
        font: @weight @size~"/"@lineHeight Arial, sans-serif;
    }
    .marginLeft( @margin ) when isnumber(@margin) {
        margin-left: @margin;
    }
    .marginTop( @margin ) when isnumber(@margin) {
        margin-top: @margin;
    }

    .DinBold( @size: 14px, @lineHeight: 20px) {
        font: @size~"/"@lineHeight 'DINBold', Arial, sans-serif;
    }

    .DinBold( @size: 14px, @lineHeight: 20px, top, @offsetTop: 0 ) {
        #font > .marginTop( @offsetTop );
        font: @size~"/"@lineHeight 'DINBold', Arial, sans-serif;
    }

    .DinBold( @size: 14px, @lineHeight: 20px, left, @offsetLeft: 0 ) {
        #font > .marginLeft( @offsetLeft );
        font: @size~"/"@lineHeight 'DINBold', Arial, sans-serif;
    }

    .DinBold( @size: 14px, @lineHeight: 20px, @offsetTop: 0, @offsetLeft: 0 ) {
        #font > .marginLeft( @offsetLeft );
        #font > .marginTop( @offsetTop );
        font: @size~"/"@lineHeight 'DINBold', Arial, sans-serif;
    }
}
于 2012-05-03T23:00:08.300 回答