Question

我正在使用Less来编写CSS，它为我节省了很多时间。现在我有一个小问题，这是我的代码：

<a href="#" class="btn-black-bg btn-right-skew">largest fight gym in Australia</a>

少

.btn{
    position: relative;
    padding: 15px 22px;
    color: @color-black;

    &-black-bg{
        background: @color-black;
        color: @color-white;
    }

    &-right-skew{
        position: relative;

        &:after{
            content: '';
            position: absolute;
            right: -10px;
            top: 0px;
            width: 20px;
            height: 100%;
            .skewX(-15deg);
        }
    }
}

现在我的目标是，如果btn-black-bg btn-right-skew，那么.btn-black-bg.btn-right-skew:after{ background: #000; }也有黑色背景。在CSS中，我可以处理这段代码：

video

但我不知道如何在LESS中这样做。希望每个人都能帮助我。

Answer 1

根据您的HTML，仅将background: #000添加到.btn-black-bg:after（两个类别中的一个）就足够了，但我假设您只想在同一个元素上存在两个类时才应用某些属性。为此，您可以使用如下的父选择器：

.btn {
    &-black-bg&-right-skew:after {
        background: #000;
        color: #fff;
    }
}

你不能将它嵌入&-black-bg或&-right-skew（因为CSS的顺序并不重要）并使用父选择器，因为父选择器总是引用完整的父母，而不仅仅是直接的父母。嵌套可以做的最好的事情如下，但需要将.btn静态添加到最里面的选择器而不是使用&。

.btn {
    &-black-bg {
        &.btn-right-skew:after {
            background: #000;
            color: #fff;
        }
    }
}

您可以使用变量来实现mentioned here之类的嵌套，但我不建议您使用它，因为上面给出的选择器更简单易读。

Answer 2

我建议将这些分词分成一个基类＆＃34; btn＆＃34;和修饰符类＆＃34; black-bg＆＃34;和＆＃34;右倾斜＆＃34;。（在我看来，这样可以更容易理解应用的内容以及如何将其组合起来。）

在codepen上查看我的示例：http://codepen.io/fabiandarga/pen/bVNpLE

<a href="#" class="btn black-bg right-skew">largest fight gym in Australia</a><br /><a href="#" class="btn green-bg right-skew">largest fight gym in Australia</a>

的CSS：

    .btn {
    display: inline-block; // added to let the padding affect the height
    position: relative;
    padding: 15px 22px;
    color: @color-black;

    &.black-bg{
        background: @color-black;
        color: @color-white;
    }
    &.green-bg{
        background: @color-green;
        color: @color-white;
    }

    &.right-skew{
        position: relative;

      &.black-bg { // combine both classes = .right-skew.black-bg
        &:after {
          background: @color-black;
        }
      }
      &.green-bg:after { // or short form
          background: @color-green;
      }
        &:after {
            content: '';
          display: block; // was missing;
            position: absolute;
            right: -10px;
            top: 0px;
            width: 20px;
            height: 100%;
            transform: skewX(-15deg); // changed to make it work in the example on codepen
        }
    }
}

使用＆符回到父选择器？

2 个答案: