CODEWITHSUNDEEP
htmlcssless
The Hung
The Hung

Reputation: 309

Back to the parent selector using ampersand?

I'm using Less to write CSS, it totally saved much time for me. Now I have small issue, here is my code:

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

Less

.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);
        }
    }
}

Now I my goal is if btn-black-bg so btn-right-skew has black background too. In CSS, I can handle with this code:

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

But I don't know how to do this in LESS. Hope everyone can help me out.

Upvotes: 2

Views: 60

Answers (2)

Fabian
Fabian

Reputation: 480

I would recomend to separate the clases into a base class "btn" and modifier classes "black-bg" and "right-skew". (In my opinion this makes it easier to understand what is applied and how it can be combined.)

see my axample on 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
        }
    }
}

Upvotes: 2

Harry
Harry

Reputation: 89780

Based on your HTML, adding the background: #000 to .btn-black-bg:after (one of the 2 classes) alone is enough but I assume you want to apply some properties only when both classes are present on the same element. For that, you can use the parent selector like below:

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

You cannot nest this into the &-black-bg or &-right-skew (as the order of classes doesn't matter in CSS) and make use of the parent selector because the parent selector would always refer to the full parent and not just the immediate parent. The best that can be done with nesting would be the below but the would need the .btn to be statically added to the innermost selector instead of using &.

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

You can make use of variables to achieve nesting like mentioned here but I wouldn't recommend it for your scenario because the selector given above is more simple and readable.

Upvotes: 2

Related Questions