处理 :before 和 :after 伪类时的嵌套 LESS 语句

Question

我有以下 LESS 语句尝试在 :after sudo 类上放置彩色背景：

.hexagon:after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  &.red-light {
    border-top: 50px solid @brand-red-light;
  }
  &.red {
    border-top: 50px solid @brand-red;
  }
  &.red-dark {
    border-top: 50px solid @brand-red-dark;
  }
  &.freen-light {
    border-top: 50px solid @brand-green-light;
  }
  &.green {
    border-top: 50px solid @brand-green;
  }
  &.green-dark {
    border-top: 50px solid @brand-green-dark;
  }
}

只有嵌套 LESS 语句中的任何内容，例如：border-top: 50px solid @brand-red-light 在渲染时不会出现在屏幕上。我试过取出“&”符号并用“>”替换它，但没有运气。我正在尝试用 CSS 绘制一个六边形。

Answer 1

您的 LESS 正在创建以下 CSS 选择器：

.hexagon:after
.hexagon:after.red-light
.hexagon:after.red
.hexagon:after.red-dark
.hexagon:after.green-light
.hexagon:after.green
.hexagon:after.green-dark

我认为你的意思是生成这个：

.hexagon:after
.hexagon.red-light:after
.hexagon.red:after
.hexagon.red-dark:after
.hexagon.green-light:after
.hexagon.green:after
.hexagon.green-dark:after

如果是这样，请将您的 LESS 重新配置为以下内容：

.hexagon {
    &:after {
        content: "";
        position: absolute;
        bottom: -50px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
    }    
    &.red-light:after {
        border-top: 50px solid @brand-red-light;
    }
    &.red:after {
        border-top: 50px solid @brand-red;
    }
    &.red-dark:after {
        border-top: 50px solid @brand-red-dark;
    }
    &.green-light:after {
        border-top: 50px solid @brand-green-light;
    }
    &.green:after {
        border-top: 50px solid @brand-green;
    }
    &.green-dark:after {
        border-top: 50px solid @brand-green-dark;
    }
}