Как написать в SASS такой миксин?

Question

[sorry_i_noob]

У свойства text-shadow в CSS может быть очень много значений. Перечисляются они через запятую. Вот пример:

text-shadow: -0.5px -0.5px 0 #fff,
        0.5px -0.5px 0 #fff,
        -0.5px 0.5px 0 #fff,
        0.5px 0.5px 0 #fff,
        0 0 17.9px rgba(255, 255, 255, 0.16);

Первые 4 значения делают обводку текста. Пятое значение делает свечение текста.

Я хочу написать миксин, который позволяет делать обводку. И при этом добавлять еще значения. Я написал вот так:

@mixin text-stroke($weight, $color) {
    text-shadow: $weight -$weight 0 $color,
    $weight -$weight 0 $color,
    -$weight $weight 0 $color,
    $weight $weight 0 $color,
    @content;
}

Но SASS выдает ошибку:

Invalid CSS after "...eight 0 $color,": expected ";", was "@content;"

Как мне написать такой миксин? Возможно ли вообще такое?

Answer 1

[Михаил]

expected ";"

Ожидалось ;

was "@content;"

было @content

@mixin text-stroke($weight, $color) {
    text-shadow: $weight -$weight 0 $color,
    $weight -$weight 0 $color,
    -$weight $weight 0 $color,
    $weight $weight 0 $color;
    @content;
}

UPD: решение

@mixin text-stroke($weight, $color, $rest...) {
    text-shadow: $weight -$weight 0 $color,
      $weight -$weight 0 $color,
      -$weight $weight 0 $color,
      $weight $weight 0 $color,
      $rest;
}

body {
  @include text-stroke(10, #fff, ffffffffffff 1 1 1,  ffffffffff 2 2 2);
}

Comments

[sorry_i_noob]

Ну так ведь теперь невозможно добавить значение
0 0 17.9px rgba(255, 255, 255, 0.16);
к свойству text-shadow.
Я хотел, чтобы это значение было @content.

[Михаил]

sorry_i_noob, так чтоль? https://www.sassmeister.com/gist/e19ef99b4709dc93f...

[sorry_i_noob]

Михаил,
Вот такой код:

// ----
// libsass (v3.5.4)
// ----

@mixin text-stroke($weight, $color) {
    text-shadow: $weight -$weight 0 $color,
      $weight -$weight 0 $color,
      -$weight $weight 0 $color,
      $weight $weight 0 $color,
      @content;
}

body {
  @include text-stroke(0.5, #fff) {
    0 0 17.9px rgba(255, 255, 255, 0.16)
  }
}

Должен писать вот такой CSS:

text-shadow: -0.5px -0.5px 0 #fff, 0.5px -0.5px 0 #fff, -0.5px 0.5px 0 #fff, 0.5px 0.5px 0 #fff, 0 0 17.9px rgba(255, 255, 255, 0.16);

Понимаете логику? @content - это еще одно значение для text-shadow.
Но этот код не компилируется.

[Михаил]

sorry_i_noob, @content это блок css кода

https://www.sassmeister.com/gist/e19ef99b4709dc93f... ?

[sorry_i_noob]

Михаил, Да, большое спасибо!