Question

我的css采用组件结构，每个组件都是独立的。

示例：

.menu {
  background: black;
}

我正在使用的框架有时会在body-tag中添加一个类。例如，对于登录用户，它看起来像这样：

<body class="loggedIn">
  <div class="menu"</div>
</body

我想在每个组件中保持css结构。是否可以在父项之前添加少量添加选择器？类似的东西：

.menu{
  %loggedIn{
    color: red
  }
}

应该为loggedIn用户提供一个红色菜单。

Answer 1

来引用父选择器

LESS

.menu {
   background: black;
  .loggedIn & {
    color: red
  }
}

将编译为CSS

.menu {
   background: black;
}
.loggedIn .menu {
    color: red
}

Answer 2

除非我完全误解你，并且有可能，否则＆符号选择正是你所需要的！＆/ p>

.menu{
  .loggedIn & {
    color: red
  }
}

应该导致

.loggedIn .menu {
  color: red
}