#frontendhelp — Public Fediverse posts

Hmm, is there a way to use sass combinators with attribute string concatenation for the value?

Here are my outputs:

data-class="Form-status--complete"
data-class="Form-status--in-progress"
data-class="Form-status--expired"

I want to do something like this:

    [data-class='Form'] {
        &-status {
            &--complete {
                color: $c-state-orange;
            }

            &--in-progress {
                color: $notice-icon-pending;
            }

            &--expired {
                color: $c-state-gray;
            }
        }
    }

Of course that doesn't work. But I am not sure if I can avoid repeating myself

I am assuming you can't just open the square brackets and wrap them around your logic like:

[data-class='Form {
   &-status {
   ...
}']

#css #sass #scss #stylesheets #html #FrontEnd #FrontEndHelp #WebDev