Sass class with class specification using BEM

[hebrerillo]

Hello there!

What I am going to ask is probably very easy, but I did not manage to get it even after so much search.

This is the HTML:

<form class='form-component'>
            <div class='form-component__row'></div>
            <div class='form-component__row form-component__row--error'></div>
        </form>

And this is the CSS I want to achieve by using SASS:

.form-component__row.form-component__row--error

So far, I managed to solve that by using this SASS:

.form-component {
    &__row {
        background-color: lightcoral;
        &.form-component__row--error {
            background-color: red;   
        }
    }
}

But I had to use the whole selector (form-component__row--error). Is there a way to do that by using two consecutive ampersands (&&)??

Thank you so much!!!

 

[tomliv]

Hello there!

What I am going to ask is probably very easy, but I did not manage to get it even after so much search.

This is the HTML:

<form class='form-component'>
            <div class='form-component__row'></div>
            <div class='form-component__row form-component__row--error'></div>
        </form>

And this is the CSS I want to achieve by using SASS:

.form-component__row.form-component__row--error

So far, I managed to solve that by using this SASS:

.form-component {
    &__row {
        background-color: lightcoral;
        &.form-component__row--error {
            background-color: red;
        }
    }
}

But I had to use the whole selector (form-component__row--error). Is there a way to do that by using two consecutive ampersands (&&)??

Thank you so much!!!

I've never heard of doubling & so I am not sure you can. You can get a little less wordy with:

.form-component {

    &.__row {

        background-color: lightcoral;

        &.[class~=__error] {

            background-color: red; 

        }

    }
}

.form-component {

    &.[class~=__row] {

        background-color: lightcoral;

        &.[class~=__error] {

            background-color: red; 

        }

    }

}