Question

我使用LESS作为css编译器。

一切正常，但现在我需要创建一个特定的类结构，我有点卡住了。

我希望有这样的结构：

.default .{color} {.icon-after/.icon-before} {.icon}

这是我已完成的代码：

.default {

  &.disabled {
    background: lighten(@grayBackground, 5%);
    color: lighten(@darkText, 35%);
    cursor: default;
    border: @grayBorder;
    text-shadow: @grayTextShadow;
  }

  &.gray {
    background: @grayBackground;
    color: @darkText;
    border: @grayBorder;
    text-shadow: @grayTextShadow;
    &:hover {
      background: darken(@grayBackground, 5%);
    }
  }

  &.green {
    background: @greenBackground;
    border: @greenBorder;
    color: @lightText;
    text-shadow: @greenTextShadow;
    &:hover {
      background: darken(@greenBackground, 10%);
    }
  }

  &.yellow {
    background: @yellowBackground;
    border: @yellowBorder;
    color: @lightText;
    text-shadow: @yellowTextShadow;
    &:hover {
      background: darken(@yellowBackground, 10%);
    }
  }

  &.blue {
    background: @blueBackground;
    border: @blueBorder;
    color: @lightText;
    text-shadow: @blueTextShadow;
    &:hover {
      background: darken(@blueBackground, 10%);
    }
  }

  &.black {
    background: @blackBackground;
    border: @blackBorder;
    color: @lightText;
    text-shadow: @blackTextShadow;
    &:hover {
      background: darken(@blackBackground, 10%);
    }
  }

  &.red {
    background: @redBackground;
    border: @redBorder;
    color: @lightText;
    text-shadow: @redTextShadow;
    &:hover {
      background: darken(@redBackground, 10%);
    }
  }

  &.icon-before{
    .IconDefaultStyleBefore
  }

  &.icon-after{
    .IconDefaultStyleAfter()
  }
}

显然这不起作用，结果是这样的：

.default .{color / .icon-after / .icon-before}

关于如何获得我的结构的任何建议？

非常感谢

修改

我想按此顺序将这些类添加到按钮中：

.default（提供默认样式）
{。colors}（以便设置背景，边框和所有颜色相关的属性）
{。icon-after或.icon-before}以便我可以选择在合适的保证金之前或之后添加图标
{。icon-name}（例如问号或刻度等）

所以，例如，添加这个类：

.default .blue .icon-before .tick

我会：

默认蓝色按钮，文字前面有刻度线图标

希望现在比以前更清楚了。

Answer 1

可以实现所需的结构，如下例所示。使用循环（保护混合）可以简化代码。

<强>解释

@colors - 一个数组列表变量，其中包含元素所需的颜色列表。
@bckground - 另一个数组列表变量，它包含@colors列表中声明的每个颜色类所需的背景颜色。
e(extract(@colors, @index))和extract(@bckground, @index) - 提取函数用于获取与每个数组迭代的索引相对应的颜色名称和背景颜色值（类似于colors[i]）。 e()函数用于提取不带引号的颜色值。
&.@{color} - 选择器插值以形成选择器值。 &是父选择器，@{color}是@colors列表变量中颜色的名称。
length(@colors) - 没有。 @colors数组列表变量中存在的颜色项。这被传递给循环函数，告诉Less Compiler循环应该执行多少次。

@colors: "red","green","black","blue","gray"; 
@bckground: #AAA, #0F0, #00F, #000, #F00;

.loop-colors(@index) when (@index > 0){ // loop to generate rules for each color
   .loop-colors(@index - 1);// call for the next iteration
   @color: e(extract(@colors, @index));
   @bgColor: extract(@bckground, @index);

   &.@{color}{
      background: @bgColor; //set background
      /* all other props */

      &:hover {
          background: darken(@bgColor, 5%);
      }

      &.icon-before{
          .IconDefaultStyleBefore;
      }

      &.icon-after{
          .IconDefaultStyleAfter();
      }
   }
}

.default{
    .loop-colors(length(@colors));
}

注意：正如他的评论中提到的七阶段最大值，我们实际上正在生成一个像.default.red.icon-before这样的选择器结构。这样的选择器本质上意味着相同的元素具有所有三个类，因此即使它被指定为.default.icon-before.red它也没有任何区别，但我假设您正在尝试建立一个更易读的结构（如< strong> 默认的红色按钮，带有图标 - 之前 ）。

Answer 2

.default{
  [...]    

  &.gray, &.black, [...every color...] {
    .icon-before{
      [...]
     }
  }
}

编辑：或者如果你需要一个不同的.icon-before每种颜色，你必须逐个插入：

.default{
 [...]

     &.gray{
     [...]
         .icon-before{
          [...]
          }
     }
}

如何创建一个合适的类结构？

2 个答案: