较少的CSS mixin guard子句无法按预期工作

Question

我有一个我开发的mixin，可以提供响应性填充和边距。

这个想法允许任何排列 - 例如，我可以使用@vertical或者所有（@all）声明@top，垂直边。

首先检查是否已声明任何单个属性，垂直/水平，然后全部。

以下代码无法正常工作。这是有问题的代码：

& when not (@top = 0), (@right = 0), (@bottom = 0), (@left = 0) {
        .MakeFluidGutter(@top; @right; @bottom; @left);
    }

我无法正确判断我已声明了3个单独的属性。

我认为由于同样的原因，下面的另外两个保护条款不起作用。

这是一个快速修复：

& when (@top > 0), (@top < 0), (@right > 0), (@right < 0), (@bottom > 0), (@bottom < 0), (@left > 0), (@left < 0) {
    .MakeFluidGutter(@top; @right; @bottom; @left);
}

以下是我的称呼方式：

   .FluidPadding(@right:1; @bottom:1; @left:1);

这可能取决于我的解释，但我知道有几位专家可以指导我走正确的道路。

谈论正确的道路 - 如果有更好的方法来实现.FluidGutter()功能，请告诉我，因为我正在学习。

这是完整的代码：

.FluidMargin(@top:0; @right:0; @bottom:0; @left:0; @vertical:0; @horizontal:0; @all:1) { 
    .FluidGutter(margin; @top; @right; @bottom; @left; @vertical; @horizontal; @all)    
}

.FluidPadding(@top:0; @right:0; @bottom:0; @left:0; @vertical:0; @horizontal:0; @all:1) { 
    .FluidGutter(padding; @top; @right; @bottom; @left; @vertical; @horizontal; @all)    
}

.FluidGutter(@property; @top; @right; @bottom; @left; @vertical; @horizontal; @all) when
     (@property = margin),
     (@property = padding) { 
    & when not (@top = 0), (@right = 0), (@bottom = 0), (@left = 0) {
        .MakeFluidGutter(@top; @right; @bottom; @left);
    }
    & when (@top = 0) and (@right = 0) and (@bottom = 0) and (@left = 0) and not (@vertical = 0), not (@horizontal = 0) {
        .MakeFluidGutter(@vertical; @horizontal; @vertical; @horizontal);
    }
    & when (@top = 0) and (@right = 0) and (@bottom = 0) and (@left = 0) and (@vertical = 0) and (@horizontal = 0) and not (@all = 0){
        .MakeFluidGutter(@all; @all; @all; @all);
    }

    .MakeFluidGutter(@top; @right; @bottom; @left) {
        .MakeGutter(@property; @arguments);
    }
}

.MakeGutter(@property; @arguments) when
     (@property = margin),
     (@property = padding) {

    .BuildGutter(@xSmallMargin);

    & when (@smallMargin > @xSmallMargin) {
        .SmallWindow({
            .BuildGutter(@smallMargin);
        });
    }
    & when (@mediumMargin > @smallMargin) {
        .MediumWindow({
            .BuildGutter(@mediumMargin);
        });
    }
    & when (@largeMargin > @mediumMargin) {
        .LargeWindow({
            .BuildGutter(@largeMargin);
        });
    }
    & when (@xLargeMargin > @largeMargin) {
        .XLargeWindow({
            .BuildGutter(@xLargeMargin);
        });
    }

    .BuildVertGutter(@size) {
        .-(top);
        .-(right);
        .-(bottom);
        .-(left);
        .-(@side) when not (@@side = 0) {
            @{property}-@{side}: (@size * @@side);
        }
    }
}