Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Sass class with class specification using BEM

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:

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:
CSS:
.form-component__row.form-component__row--error

So far, I managed to solve that by using this SASS:
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!!!
 
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:

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:
CSS:
.form-component__row.form-component__row--error

So far, I managed to solve that by using this SASS:
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:

SCSS:
.form-component {

    &.__row {

        background-color: lightcoral;

        &.[class~=__error] {

            background-color: red; 

        }

    }
}

.form-component {

    &.[class~=__row] {

        background-color: lightcoral;

        &.[class~=__error] {

            background-color: red; 

        }

    }

}
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom