Css 空的、受保护的mixin在更少的时间内将相同规则下的其他mixin归零

我一直在尝试让以下受保护的混音在我们较少的样式表中正常工作：

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

或

---

似乎连边缘顶端都不会暴露出来。同样的事情也会发生，如果你将它翻转过来，将marginTop mixin放在marginLeft mixin之前，并将0传递给@offsetTop，这似乎表明在第一次命中空mixin时，所有后续的mixin调用都可能被忽略-对此有什么见解吗？

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

然而，我有一个新的想法，基于。尝试以下方法。它的设计允许您在不设置边距的情况下仅传入两个参数，或传入四个参数，但第三个参数可以是“top”或“left”，以允许第四个参数仅设置一个或另一个，或者您可以传入两个数字并同时设置top和left（按此顺序）。这样可以避免在不需要时调用

.marginLeft/Top

，如果您选择传入一个

0

，则可以接受

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

---

我一直在为同一个问题而挣扎，修改了一些用lesshp编译的不太好的东西，但没有用lessjs。似乎空的mixin阻止同一规则集中或包含mixin的所有后续mixin呈现。但是把任何内容放在空的mixin中，一切都正常

---

因此，简单的解决方案是在空的mixin中添加较少的注释（//），这让我惊讶，效果很好。只需在自己的行上使用两个简单的正斜杠，没有其他内容，较少的注释不会在输出CSS中呈现，因此您的mixin是空的。

这肯定是不寻常的行为。据我所知，您的bundle和mixin看起来是正确的，因此它本身可能是一个问题。可能想在项目的git回购上打开一张票据。我尝试过的一件事是用分数表示我想要为零的值，所以是0.1px，而不是0。并显示了边缘属性。我不相信CSS会处理分数，所以它可能会被解释为0。看起来他们最终对此进行了修复，并将在下一版本中发布：嘿，Scott，如果我没记错的话，LESS在我删除zero大小写时向我抛出编译错误，说没有定义任何方法。至于第二种解决方案，margin:auto与no margin不同，如果我没有弄错的话，这会导致浏览器在设置为auto时产生奇怪的边距偏移…@Johnny——编译错误很有趣。关于另一种情况，我假设您的陈述“我不希望设置边距样式”，如果是零情况，那么您的意思是

auto

。但你是对的，我认为在大多数情况下，默认情况下，边距是

0

。是否有理由不将其设置为

0

？另外，我还将添加我想到的第三种可能的解决方案。@Johnny——第一种情况会抛出编译错误，这似乎很奇怪。你应该能够在没有其他任何东西的情况下设置这样的防护条件。我添加了第三个想法，它使用了两个

when

语句，但是仍然没有零大小写（但可能是

when not

导致编译错误）。实际上，您的第三个解决方案是我在执行when not之前尝试的第一个解决方案。除非我没有记错，否则LESS只是不喜欢没有任何东西可以处理0的情况。我不想显式地指定左边距：0，因为这有时会无意中覆盖某些更高/通用的共享styles@Johnny--奇怪。基于较少的文档，它没有意义。然而，我“重新思考”了你的问题，并提出了一个全新的答案。

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