时间戳

首页 > 解决方案 > 如何在选择器中使用变量

less - 如何在选择器中使用变量

问题描述

有了.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;
}

但这没有用。

那么我该如何编写能够以一种好的方式生成输出的东西。我想让颜色变化接近默认颜色。而且我不想有不必要的重复代码=不将每种颜色的字体大小重置为相同的值。

标签： less

解决方案

您可以使用变量作为选择器：

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

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

你可以做很多事情来规避它，mixin、functions、includes、maps 等等，只要适合你的需要。这是一个带有通用循环的简单示例：

@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”按钮，或查看此处

<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>

推荐阅读