Question

我正在尝试使用LESS编写动态mixin以根据ID自动生成CSS。 LESS可以吗？

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

Answer 1

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

第一部分可以这样完成：

Dictionary<string, string> keyValuePairs = str.Split('&').Select(value => value.Split('=')) .ToDictionary(pair => pair[0], pair => pair[1]);

如果这样做，请使用

framework 2.0

将为您提供预期的CSS输出

@body-margin: 50px;

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

在此处详细了解：Defining Variable Variables using LESS CSS。

第二部分，确定插值变量是否存在，我认为您不能在LESS中执行此操作。您将必须提前定义所有可能的变量，但这并不意味着您对如何定义这些变量就不会变得聪明。

假设您不想为body { .spacing('body); }定义变量。在这种情况下，您可以执行以下两项操作之一，只要您认为对您有所帮助。

第一个是，您可以将变量值设置为等于CSS中的默认值（对于body { margin: 50px; }，为@body-padding-mobile），也可以等于0。 / p>

或者，如果您担心那会导致您最终覆盖不想覆盖的样式，那么更棘手的解决方案是使变量等于无效值，因此浏览器从不应用样式。例如：padding。

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

initial

所以，如果我们从这里开始：

@body-padding-mobile: fishsticks

我们会得到这个：

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

动态LESS混合

1 个答案: