Объединить элементы списка в значение свойства с кавычками

Question

Учитывая строку $prefix=Note и список $attributes = a b c, какой цикл SCSS будет производить это? -

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

Этот более ранний пост ( объединение строк с использованием sass ) приблизил меня, но я все еще не могу понять это правильно.

EDIT

Такого рода работы, но я не знаю почему.

note {
  $attributes: a b c;
  $pre: '' "Note";
  $space: '' " ";
  &::before { 
    $content: $pre;
    @each $attribute in $attributes {
      $content: $content + $space + " attr(" + $attribute + ")";
    }; 
    content:  #{$content}; 
  }
}

производит

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

, который браузер будет обрабатывать правильно, поскольку он игнорирует "".

Но это непонятный взлом. Как правильно это сделать?

Answer 1

Интересная строка действительно!Вы можете попробовать это так.

note {
  $attributes: a b c;
  $pre: 'Note';
  $space:"' '";
  &::before {
    $content:"";
    @each $attribute in $attributes {
      $content: $content + $space + attr($attribute);
    }
    content:$pre #{$content};
  }
}

Надеюсь, это поможет!: -)