Question

我有这个HTML标记：

<figure class="about half">
    <figcaption class="head_section">
        <h3>About</h3>
    </figcaption>
</figure>

这个LESS设置：

 figure {
    //some style

    &.half {
      width: 48%;
    }

    figcaption {

      h3 {

        .about & & {
          // what i need to do but isn't working
        }
      }
    }

    &.about {

      h3 {
        // some style i have which is working
      }
    }
  }

所以，我的问题是如何引用两个普通类figure.about，以免超出风格h3。我希望这很清楚......很多。

Answer 1

我仍然不确定我理解你要在这里实现的目标，因为你没有提供所需的css输出。我设法从你的问题中提取的想法将是一个看起来像这样的CSS：

figure {
  /* some style */
}
figure.half {
  width: 48%;
}
figure.about figcaption h3 {
  /* what i need to do but isn't working */
}

这是正确的吗？

以下是使用&：

的方法

figure {
    /* some style */
    &.half {
        width: 48%;
    }
}
figcaption {
    h3 {
        .about & {
            /* what i need to do but isn't working */
        }
    }
}

这里的问题是&返回上面所有嵌套级别的“路径”，因此您需要构建与您想要使用的嵌套规则完全相同的嵌套规则（在我们的例子中，我移动了{{} 1}}超出figcaption规则。所以这应该给你你想要的选择器外观。但是，嵌套规则的结构通常取决于您希望使用figure继承和范围引用的方式，在某些情况下，它只是让您很难按照您想要的方式构建结构选择器，但随后几乎永远不需要在选择器中包含整个html结构 - 就像在你的情况下@variable和figure.about h3一样，因为你可能不会添加更多figure.about figcaption h3元素进入图形容器。

如何使用LESS引用前两个元素/标记/类

1 个答案: