较少的CSS mixin保护子句未按预期工作

我开发了一个mixin，它允许响应性的填充和边距

其思想是允许任何排列-例如，我可以用@vertical或all（@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);
}

这可能取决于我的理解，但我知道这里有几位专家能够引导我走上正确的道路

谈论正确的路径-如果有更好的方法实现

.fluidGotter（）

功能，请在学习过程中告诉我

---

以下是完整的代码：

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

---

事实上，我已经发现了我的错误所在（代码中遗漏了多个“not”），但我仍然非常感谢较少专家的任何评论。是的，乍一看，您只是在每个

或
ed条件下遗漏了
not
。即
非（a）、（b）
不等于
非（a、b）
。（这可能会让人困惑，因为它不同于
not
在媒体需求中的工作方式，但在较少的情况下，他们决定了更规范的not和/或行为，其中或/和具有更高的优先级-否则就不可能创建许多典型表达式…因此，也建议使用
或
而不是
）。对于其余部分，您知道对于一个复杂的代码片段，需要花时间来理解代码实际在做什么，以提供一些真正的提示（而不是无用的逐行建议）。虽然快速浏览（如果只是关于我），我恐怕代码使用了一个“前五个”，我[积极反对最近]，所以我的小窍门是“从头开始重新思考整个方法”（在开发过程中对你不是很有帮助，对吧？）但除此之外，它会对一些你认为根本不正确的代码片段进行冗长的重构。@seven Phase max-谢谢你的评论-最重要的5个方面是什么？无论哪种方式，另一个重要提示是在混合条件下思考，而不是盲目的
if->&when
翻译，例如，请注意，您的
fluidGotter
代码可以重写为类似（伪代码，因为我也不能真正测试）。而且还有很大的空间用于（当
时总是优先于
，例如，您可以匹配
所有trlb=0
）和。
.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);
        }
    }
}