Question

我有一个取决于父母的.tintTile，因此＆amp; sas如下：

// Tint titles
.tintTitle {
    text-transform: uppercase; 
    font-family: @fontDemiBold;
    color: @colorOrangeKWS;

    .Windows7 & {
        font-family: arial, sans-serif;
        font-weight: bold;
        color: @colorOrangeKWS;
    }
}

在许多其他课程中，我使用.tintTitle，如下所示：

// titles, orange bold
.tab {
    &>div {
        .tintTitle;
        // etc.
    }
}

不幸的是，我无法实现.Windows7（前提是Windows7是一个设置为body标签的类，如下所示：

<body class="Windows7">

        <p class="tintTitle">Good, it works</p>

        <div class="tab">
            <div>This title doesn't make it</div>

有没有办法实现我的目标，除了重复每个.tintTitle所需的位置？

Answer 1

据我所知，您的代码应该在Less中有效，请参阅http://codepen.io/anon/pen/KwNWmq

少代码：

// Tint titles
.tintTitle {
    text-transform: uppercase; 

    color: green;

    .Windows7 & {
      text-transform: initial; 
      color: red;
    }
}
.tab {
    &>div {
        .tintTitle;
        // etc.
    }
}

您正在使用parent selectors feature的Less change the selector order

您唯一应该注意的是，为您的.windows选择器设置的属性（不包含.windows）也适用于您的text-transform: initial;选择器。这就是为什么我必须设置.windows *，否则{{1}}也会变大，导致也匹配.tintTitle。

如何根据其顶级父级修改类的行为？

1 个答案: