Back to the parent selector using ampersand? - html

Question

I'm using Less to write CSS, it totally saved much time for me. Now I have small issue, here is my code:
largest fight gym in Australia
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.

Answer 1

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.

Answer 2

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
largest fight gym in Australia<br />largest fight gym in Australia
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
}
}
}