css - 在函数输出之后对元素选择器应用 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)，该函数将运行 for(以给出输出的前两行)，然后运行传入的列表中的元素以将这些附加到函数的输出？像在函数内传入的列表上运行 .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);
  }
}