我们可以用Sass循环一个CSS值吗?

时间:2015-04-09 07:24:06

标签: css sass

有没有办法在SASS中使用@for循环执行此操作?

.shadow {
  text-shadow:
    0                    $cut-distance*1/5  0 $background-color,
    0                    $cut-distance*2/5  0 $background-color,
    0                    $cut-distance*3/5  0 $background-color,
    0                    $cut-distance*4/5  0 $background-color,
    0                    $cut-distance      0 $background-color,

    0                  (-$cut-distance)*1/5 0 $background-color,
    0                  (-$cut-distance)*2/5 0 $background-color,
    0                  (-$cut-distance)*3/5 0 $background-color,
    0                  (-$cut-distance)*4/5 0 $background-color,
    0                  (-$cut-distance)     0 $background-color,

    $cut-distance*1/5    0                  0 $background-color,
    $cut-distance*2/5    0                  0 $background-color,
    $cut-distance*3/5    0                  0 $background-color,
    $cut-distance*4/5    0                  0 $background-color,
    $cut-distance        0                  0 $background-color,

  (-$cut-distance)*1/5   0                  0 $background-color,
  (-$cut-distance)*2/5   0                  0 $background-color,
  (-$cut-distance)*3/5   0                  0 $background-color,
  (-$cut-distance)*4/5   0                  0 $background-color,
  (-$cut-distance)       0                  0 $background-color,

  (-$cut-distance)*1/5 (-$cut-distance)*1/5 0 $background-color,
  (-$cut-distance)*2/5 (-$cut-distance)*2/5 0 $background-color,
  (-$cut-distance)*3/5 (-$cut-distance)*3/5 0 $background-color,
  (-$cut-distance)*4/5 (-$cut-distance)*4/5 0 $background-color,
  (-$cut-distance)     (-$cut-distance)     0 $background-color,

  (-$cut-distance)*1/5   $cut-distance*1/5  0 $background-color,
  (-$cut-distance)*2/5   $cut-distance*2/5  0 $background-color,
  (-$cut-distance)*3/5   $cut-distance*3/5  0 $background-color,
  (-$cut-distance)*4/5   $cut-distance*4/5  0 $background-color,
  (-$cut-distance)       $cut-distance      0 $background-color,

    $cut-distance*1/5  (-$cut-distance)*1/5 0 $background-color,
    $cut-distance*2/5  (-$cut-distance)*2/5 0 $background-color,
    $cut-distance*3/5  (-$cut-distance)*3/5 0 $background-color,
    $cut-distance*4/5  (-$cut-distance)*4/5 0 $background-color,
    $cut-distance      (-$cut-distance)     0 $background-color,

    $cut-distance*1/5    $cut-distance*1/5  0 $background-color,
    $cut-distance*2/5    $cut-distance*2/5  0 $background-color,
    $cut-distance*3/5    $cut-distance*3/5  0 $background-color,
    $cut-distance*4/5    $cut-distance*4/5  0 $background-color,
    $cut-distance        $cut-distance      0 $background-color
}

我正在跳这样的事情

.shadow {
  text-shadow:
    @for $i from 1 through 5 {
      0 $cut-distance*$i/5 $background-color,
      0 (-$cut-distance)*$i/5 background-color,
      ...
    }
}

0 个答案:

没有答案