Написание SASS Mixin для 3D текста с глубиной

У меня есть следующий SASS Mixin в моем проекте

@mixin text_3d($color){
  color: $color; 
  text-shadow:   0 3px 0 darken($color, 14%),
         0 4px 0 darken($color, 15%),
         0 5px 0 darken($color, 16%),
         0 6px 0 darken($color, 17%),
        3px 8px 15px rgba(0,0,0,0.1),
        3px 8px 5px rgba(0,0,0,0.3);

}

Я хотел бы заменить несколькотекст-тень» линии в петле, но я могуне могу понять, как это сделать. В псевдокоде:

@mixin text_3d($color, $depth){
  color: $color; 
  text-shadow:   
       @for $i from 0 through $depth {
           0 ($i+3)px 0 darken($color, $i+14%), 
       }

    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);

}

Но я продолжаю получать ошибки, как будто я могуПоместите @for там.

(Line 143: Invalid CSS after "  text-shadow:": expected expression (e.g. 1px, bold), was "@for $i from 0 ...")

Ответы на вопрос(1)

Решение Вопроса
@mixin threedshadow($color, $depth) {
  $all: ();
  @for $i from 1 through $depth {
    $all: append($all, append($i*1px $i*1px 0, darken($color, $i+14%)), comma);
  $all: append($all, 3px 8px 15px rgba(0,0,0,.1), comma);
  $all: append($all, 3px 8px 5px rgba(0,0,0,.3));
  text-shadow: $all
  }
}

h1 {
  @include threedshadow(#fff, 5);
}

проблема что я был, трюк в том, чтобы сохранить значения дляtext-shadow в переменной за пределами@for цикл, а затемappend() их на с.comma

Вы также можете настроить тень, которую вы оставили за пределами цикла в вашем примере, чтобы она соответствовала.$depth

демонстрация

 guy mograbi21 окт. 2012 г., 08:09
Я вижу, что вы используете какой-то другой синтаксис, чем у меня.sass-lang.com Можете ли вы уточнить это?
 bookcasey22 окт. 2012 г., 15:23
Я только что прочитал официальныйдокументыпарень!
 guy mograbi22 окт. 2012 г., 09:40
Вот Это Да! удивительно. Я'Мы пытались прочитать решение этой проблемы в течение нескольких часов, но не моглине могу найти это где угодно. Могу я спросить, откуда ты это знаешь? Каковы ваши ресурсы?
 bookcasey21 окт. 2012 г., 15:44
Я использовал .sass, который отказывается от точек с запятой и скобок в пользу пробела. Я'Я обновлю ответ до .scss, который больше похож на vanilla css.

Ваш ответ на вопрос