在函数输出之后对元素选择器应用 less 函数

Question

我的代码比较少，如下所示：

.my-func(@color) {
  &:not(:hover) {
    color: @color;
  }
}
.class1, .class2 {
  .subClass1 {
    .my-func("#ffffff");
  }
}

结果如下 css：

.class1 .subClass1:not(:hover),
.class2 .subClass1:not(:hover) {
  color: "#ffffff";
}

我想做的是生成 css ，除了输出现在正在输出的内容外，还允许我在 css 的部分之后添加更多选择器由函数输出。

所以我想要 css 看起来像这样（我添加了换行符）：

.class1 .subClass1:not(:hover),
.class2 .subClass1:not(:hover),

.class1 .subClass1:not(:hover) p.some-other-class,
.class2 .subClass1:not(:hover) p.some-other-class,

.class1 .subClass1:not(:hover) p.yet-another-class,
.class2 .subClass1:not(:hover) p.yet-another-class {
  color: "#ffffff";
}

那么这是否可以使用较少的功能来完成，这样我就可以以某种方式将两个元素选择器的列表传递给函数（p.some-other-class 和 p.yet-another-class），函数将运行用于（给出输出的前两行）然后将运行用于传入的列表中的元素以附加这些 after 函数的输出？像运行在函数中传入的列表中的 .each 函数来完成此操作？

Answer 1

您可以尝试如下：

@class: some-other-class, yet-other-class;

.my-func(@color) {
  &:not(:hover)  {
      color: @color;
  }
  each(@class, {
    &:not(:hover) p.@{value} {
      color: @color;
    }
  })

}
.class1, .class2 {
  .subClass1 {
    .my-func(#ffffff);
  }
}

如果要将列表传递给函数，请按如下方式调整：

.my-func(@color,@list) {
  &:not(:hover)  {
      color: @color;
  }
  each(@list, {
    &:not(:hover) p.@{value} {
      color: @color;
    }
  })

}

@class: some-other-class, yet-other-class;
.class1, .class2 {
  .subClass1 {
    .my-func(#ffffff,@class);
  }
}

更通用的选择器如下所示：

.my-func(@color,@list) {
  &:not(:hover)  {
      color: @color;
  }
  each(@list, {
    &:not(:hover) @{value} {
      color: @color;
    }
  })

}

@class: ~"p.some-other-class", ~"div.yet-other-class";
.class1, .class2 {
  .subClass1 {
    .my-func(#ffffff,@class);
  }
}

在函数输出之后对元素选择器应用 less 函数

Apply less function to element selectors following the function output

css

less