Comment faire pour boucler des valeurs de propriété dans sass?

Question

Je n'en ai vu que des implémentations dans les classes. J'ai text-shadow qui ajoute 1px à la Y-coordinate pour chaque déclaration. Je veux le refactoriser pour qu'il s'incrémente alors que les autres valeurs restent les mêmes. Voici le code:

text-shadow: 0px 1px #00B760, 0px 2px #00B760, 0px 3px #00B760, 0px 4px #00B760, 0px 5px #00B760, 0px 6px #00B760, 0px 7px #00B760, 0px 8px #00B760, 0px 9px #00B760, 0px 10px #00B760, 0px 11px #00B760, 0px 12px #00B760, 0px 13px #00B760, 0px 14px #00B760, 0px 15px #00B760, 0px 16px #00B760, 0px 17px #00B760, 0px 18px #00B760, 0px 19px #00B760, 0px 20px #00B760, 0px 21px #00B760, 0px 22px #00B760, 0px 23px #00B760, 0px 24px #00B760, 0px 25px #00B760, 0px 26px #00B760, 0px 27px #00B760, 0px 28px #00B760, 0px 29px #00B760, 0px 30px #00B760, 0px 31px #00B760, 0px 32px #00B760, 0px 33px #00B760, 0px 34px #00B760, 0px 35px #00B760, 0px 36px #00B760, 0px 37px #00B760, 0px 38px #00B760, 0px 39px #00B760, 0px 40px #00B760, 0px 41px #00B760, 0px 42px #00B760, 0px 43px #00B760, 0px 44px #00B760, 0px 45px #00B760, 0px 46px #00B760, 0px 47px #00B760, 0px 48px #00B760, 0px 49px #00B760, 0px 50px #00B760, 0px 51px #00B760, 0px 52px #00B760, 0px 53px #00B760, 0px 54px #00B760, 0px 55px #00B760, 0px 56px #00B760, 0px 57px #00B760, 0px 58px #00B760, 0px 59px #00B760, 0px 60px #00B760, 0px 61px #00B760, 0px 62px #00B760, 0px 63px #00B760, 0px 64px #00B760, 0px 65px #00B760, 0px 66px #00B760, 0px 67px #00B760, 0px 68px #00B760, 0px 69px #00B760, 0px 70px #00B760, 0px 71px #00B760, 0px 72px #00B760, 0px 73px #00B760, 0px 74px #00B760, 0px 75px #00B760, 0px 76px #00B760, 0px 77px #00B760, 0px 78px #00B760, 0px 79px #00B760, 0px 80px #00B760, 0px 81px #00B760, 0px 82px #00B760, 0px 83px #00B760, 0px 84px #00B760, 0px 85px #00B760, 0px 86px #00B760, 0px 87px #00B760, 0px 88px #00B760, 0px 89px #00B760, 0px 90px #00B760, 0px 91px #00B760, 0px 92px #00B760, 0px 93px #00B760, 0px 94px #00B760, 0px 95px #00B760, 0px 96px #00B760, 0px 97px #00B760, 0px 98px #00B760, 0px 99px #00B760, 0px 100px #00B760; 

Answer 1

J'espère que cela peut vous aider.

@function custome-box-shadow($n) 
{ 
    $box-shadow: ''; 
    @for $i from 1 through $n { 
    $shadows: '0px ' + $i +'px #00B760' ; 
    $box-shadow: $box-shadow + $shadows + ' ,'; 
    } 
    @return str_slice(unquote($box-shadow), 0, str_length($box-shadow)-1) ; 
} 

.test 
{ 
    -moz-box-shadow: custome-box-shadow(3); 
    -webkit-box-shadow: custome-box-shadow(3); 
    box-shadow: custome-box-shadow(3); 
} 

Link