Как сделать цикл для значений свойства css?

Question

[Adexs]

Есть способ применять цикл для значений свойства, например, box-shadows, чтобы задать количество теней через запятую с каждым последующим увеличением смещения на заданное значение?

Ниже то, на что хватило.

%craft {
  width: 27px; 
  height: 31px;
  display: block;
  margin-right: 10px;
  border: 1px solid black;
}
@for $i from 2 through 4 {	
	$start: 0px; 						//стартовое смещение
	$color: $line-background_color;		//цвет
	$length: $start - $i; 				//смещение тени
	
	$shadow: #{$length} #{$length} 0 #{$color};	//все параметры	
	
	
	@for $a from 3 through 5 {	
		$all: #{$shadow},;
		$test: #{$all} ,#{$shadow};


		@for $a from 5 through 7 {			
			$test: #{$shadow},#{$shadow};

			.craft {
				@extend %craft;	
				
				@include box-shadow($test);
			}
		}
	}
}

Answer 1

[Иван]

@function makelongshadow($color) {
$val: 0px 0px $color;
@for $i from 1 through 200 {
$val: #{$val}, #{$i}px #{$i}px #{$color};
}
return $val;
}