Vfrdtyky

Given a string $prefix=Note and a list $attributes = a b c what SCSS loop will produce this? —

 ::before {content: "Note " attr(a) " " attr(b) " " attr(c)}

This earlier post (concatenate strings using sass) has gotten me close, but I still cannot get it right.

EDIT

This sort of works, but I do not know why.

note {

  $attributes: a b c;

  $pre: '' "Note";

  $space: '' " ";

  &::before { 

    $content: $pre;

    @each $attribute in $attributes {

      $content: $content + $space + " attr(" + $attribute + ")";

    }; 

    content:  #{$content}; 

  }

}

It produces

note::before {

  content: "" "Note""" " " attr(a)"" " " attr(b)"" " " attr(c);

}

which the browser will handle correctly since it ignores the "".

But it is a not-understood hack. What is the right way to do this?

Interesting string indeed! You could try this way.

note {

  $attributes: a b c;

  $pre: 'Note';

  $space:"' '";

  &::before {

    $content:"";

    @each $attribute in $attributes {

      $content: $content + $space + attr($attribute);

    }

    content:$pre #{$content};

  }

}

Hope it helps! :-)