Css 动态少混入

我正在尝试用更少的代码编写一个动态mixin，以便根据ID自动生成CSS。是否可以用更少的代码

// Variables
@body-margin: 50px;
@body-margin-tablet: 30px;
@body-margin-mobile: 20px;

@body-padding: 150px;
@body-padding-tablet: 130px;

// Mixin
#spacing(@id) {
    & when ( @{id}-margin ) {
        margin: @{id}-margin;
    }

    & when ( @{id}-padding ) {
        padding: @{id}-padding;
    }

    @media (max-width: 900px) {
        & when ( @{id}-margin-tablet ) {
            margin: @{id}-margin-tablet;
        } 

        & when ( @{id}-padding-tablet ) {
            padding: @{id}-padding-tablet;
        } 
    }

    @media (max-width: 500px) {
        & when ( @{id}-margin-mobile ) {
            margin: @{id}-margin-mobile;
        } 

        & when ( @{id}-padding-mobile ) {
            padding: @{id}-padding-mobile;
        } 
    }
}

body {
    #spacing('body');
}

预期结果：

body {
    margin: 50px;
    padding: 150px

    @media (max-width: 900px) {
        margin: 30px;
        padding: 130px;
    }

    @media (max-width: 500px) {
        margin: 20px;
    }
}

---

所以这个问题基本上有两个部分。第一个是如何在mixin中动态插入变量名，第二个是如何确定插入的变量是否存在

第一部分可以这样做：

@body-margin: 50px;

.spacing(@id) {
  margin: ~"@{@{id}-margin}";
}

如果你这样做，那么使用

body {
  .spacing('body);
}

将为您提供预期的CSS输出

body {
  margin: 50px;
}

请在此处阅读更多相关信息：

第二部分，确定插值变量是否存在，我不认为你能做得更少。您必须提前定义所有可能的变量，但这并不意味着您不能巧妙地定义这些变量

假设您不想为

@body padding mobile

定义变量。在这种情况下，你可以做两件事中的一件，无论你认为哪件对你更有帮助

首先，您可以将变量值设置为CSS中的任何默认值（

0

，在

填充的情况下），或者只设置
初始值

或者，如果您担心这将意味着您最终会覆盖您不想覆盖的样式，那么更糟糕的解决方案是只将变量设置为无效值，这样浏览器就不会应用该样式。例如：
@身体填充移动：鱼竿


假设已经声明了mixin所需的所有变量，则可以使用此mixin来获得所需的：

.spacing(@id) {
  margin: ~"@{@{id}-margin}";
  padding: ~"@{@{id}-padding}";
  @media (max-width: 900px) {
    margin: ~"@{@{id}-margin-tablet}";
    padding: ~"@{@{id}-padding-tablet}";
  }
  @media (max-width: 500px) {
    margin: ~"@{@{id}-margin-mobile}";
    padding:~"@{@{id}-padding-mobile}";
  }
}

因此，如果我们从这个开始：

@body-margin: 50px;
@body-margin-tablet: 30px;
@body-margin-mobile: 20px;

@body-padding: 150px;
@body-padding-tablet: 130px;
@body-padding-mobile: 0;

body {
  .spacing('body');
}

我们会得到这个：

body {
  margin: 50px;
  padding: 150px;
}
@media (max-width: 900px) {
  body {
    margin: 30px;
    padding: 130px;
  }
}
@media (max-width: 500px) {
  body {
    margin: 20px;
    padding: 0;
  }
}

谢谢，我希望有一种方法可以检查是否定义了var，因为我们的变量来自PHP。现在我们需要将所有未定义的变量设置为null。