Question

使用.class &，我可以添加规则，将父类添加到路径中，但它总是将该父类置于所有父类的前面。

有办法在中间的某个地方添加一个父母。

我尝试为此使用变量：更少的例子：

@color: "";
.a {
  .b @color {
    .d {
      .e {
        font-size: 2em;
        color: black;
        @color: ".yellow";
        color: yellow;
        @color: ".red";
        color: red;
        @color: "";
      }
      .f {
        font-size: 1.2em;
      }
    }
  }
}

预期输出：

.a .b .d .e {
  font-size: 2em;
  color: black;
}
.a .b .yellow .d .e {
  color: yellow;
}
.a .b .red .d .e {
  color: red;
}
.a .b .d .f {
  font-size: 1.2em;
}

但这没用。

那我该如何写一些能很好地产生输出的东西。我想使颜色变化接近默认颜色。而且我不想有不必要的重复代码=不将每种颜色的字体大小重置为相同的值。

Answer 1

您可以将变量用作选择器：

@color: .yellow;
.a {
  .b @{color} {
    ...

但是在您的示例中它不起作用，因为变量是从上一次使用链中开始编译的（这就是为什么您可以重复使用变量的原因），这意味着.red将永远不会填充到您想要的位置（与黄色，因为它位于最后一个作用域）

您可以做很多事情来规避它，mixin，函数，包含，地图等，真正满足您的需求。这是一个带有通用循环的简单示例：

@colors: cornflowerblue, green, red, yellow;

.a  {
  .b {
    each(@colors, {
      .@{value} .d {
        .e {
          color: @value;
        }
      }
    });
    .d .e { 
      font-size: 2em;
    }
    .d .f {
      font-size: 1.2em;
    }
  }
}

您可以点击嵌入代码段底部的“查看已编译的CSS”按钮，或查看here

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css" data-user="soulshined2" data-slug-hash="ErBYOY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="ErBYOY">
  <span>See the Pen <a href="https://codepen.io/soulshined2/pen/ErBYOY/">
  ErBYOY</a> by soulshined (<a href="https://codepen.io/soulshined2">@soulshined2</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Answer 2

用例非常接近各种“主题”问题，例如：

即有很多可能的解决方案，每种解决方案都有其优缺点，这取决于实际项目的其他细节和目标。

---

照原样获取“预期输出”，一个好的开始就是编写一个处理重复代码的mixin，例如：

＃1

.a .b {
    .d .e {
        font-size: 2em;
        color: black;
    }
    .-(@color) {
        .@{color} .d .e {color: @color}  
    }
    .-(red);
    .-(yellow);
    .-(green);
    // etc.
}

---

通过一些欺骗和黑客手段，我们可以摆脱.d .e的重复，但是我怀疑复杂性的增加和潜在的问题是否值得：

＃2

.a .b {
    .themed(~'.d .e', {
        font-size: 2em;
        color: black;
    }, {
        color: @color;
    });
}

// .....................
// generic "theme" impl.

.themed(@selector, @default, @colored) {
    .-(default);
    .-(red);
    .-(yellow);
    .-(green);

    .-(@color) {
         .@{color} @{selector}
             when (iscolor(@color)) {@colored();}
         @{selector}
             when not (iscolor(@color)) {@default();}
    }
}

---

为了说明实现“预期输出”示例的可能实现方式的变化几乎是无限的，并且主要取决于您熟悉的较少功能以及可以/想要/喜欢使用的功能，这里有一点使用更多“常规” /“主流”逻辑的更多“ Modern Less”示例（许多人会更喜欢使用；要求3.x或更高版本）：

＃3

.a .b {
    .d .e {
        font-size: 2em;
        color: black;
    }
    each(red yellow green, {
        .@{value} .d .e {color: @value}
    });
}

（尽管已经在另一个答案中提出了相同的建议）。

---

说到选择器中间的.color元素，请考虑您的HTML是否确实需要这样做。即您实际上是否需要这样的 overspecific 选择器，例如：
.a .b .yellow .d .e，
.x .y .yellow .d .e，
.p .q .yellow .d .e，
.a .b .yellow .foo .e，
有不同的颜色值？

像.yellow .e {color: yellow}这样的游戏集还不够吗？

如何在选择器中使用变量

2 个答案:

---

---

---

---