在函数输出后将较少的函数应用于元素选择器

问题描述 投票:0回答:1

我的代码如下所示:

.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-classp.yet-another-class),然后该函数将运行(给出前两行)输出),然后为传入的列表中的元素运行以将这些after函数输出追加到元素中?像在函数内传入的列表上运行.each函数来完成此操作?

css less
1个回答
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);
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.