动态 LESS 混入

Question

我正在尝试使用 LESS 编写动态混合以根据 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 中动态插入你的变量名，第二个是如何确定你插入的变量是否存在。

第一部分可以这样完成：

@body-margin: 50px;

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

如果这样做，则使用

body {
  .spacing('body);
}

将为您提供

的预期CSS输出

body {
  margin: 50px;
}

在此处阅读更多相关信息：Defining Variable Variables using LESS CSS。

第二部分，确定插值变量是否存在，我认为你不能在 LESS 中完成。您将不得不提前定义所有可能的变量，但这并不意味着您无法巧妙地定义这些变量。

假设您不想为 @body-padding-mobile 定义变量。在这种情况下，您可以做以下两件事之一，无论您认为对您更有帮助。

首先，您可以将变量值设置为等于 CSS 中的任何默认值（0，在 padding 的情况下），或者只是 initial.

或者，如果您担心这将意味着您最终会覆盖您不想覆盖的样式，则更 hacky 的解决方案是让变量等于一个无效值，这样浏览器就永远不会应用风格。例如：@body-padding-mobile: fishsticks.

假设您已经声明了 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;
  }
}

动态 LESS 混入

Dynamic LESS mixin

css

less

less-mixins