Question

我只在课堂上看过它的实现。我有文本阴影，每个声明为Y-coordinate添加1px。我想重构它，所以它增加，而其他值保持不变。这是代码：

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

我希望它可以帮到你。

@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

如何在sass中循环属性值？

1 个答案: