Luke Harby

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

Feb 5 at 11:05amWeb
Show threadStu RobsonFeb 5

@lukeharby nah, Sass doesn't support string interpolation or concatenation w/ attribute selectors.

14 years ago I'd have said create a mixin (which is possible) but now I'd lean toward being explicit.

You could try a mixin or a loop and map if you fancy it though

Show threadLuke HarbyFeb 5
@sturobson Phooey!
Show threadSass, DavidFeb 5
@lukeharby I regret to inform you that I - as a Sass - have no idea.
Show threadLuke HarbyFeb 5
@sassdawe I'm sure you're sassy in a different way!