Question

在我的文件中寻找一个很好的mixin来减少代码。动画非常简单，每个触发的列表项都会从左侧滑入，延迟（每个元素）。 “过渡”混合是一个基本过渡（所有供应商）混合。

.nav-main{

     li:nth-of-type(1) a{             

       @include transition( 0.5s linear 0.5s);

     }

     li:nth-of-type(2) a{


       @include transition( 0.5s linear 0.6s);

     } 

     li:nth-of-type(3) a{


       @include transition( 0.5s linear 0.7s);

     }

     li:nth-of-type(4) a{


       @include transition( 0.5s linear 0.8s);

     }

     li:nth-of-type(5) a{


       @include transition( 0.5s linear 0.9s);

     }

// and so on...

  }

Answer 1

您可以使用for loop来实现此目标。

.nav-main{
  @for $i from 1 through 5 {
    li:nth-of-type(#{$i}) a {
      @include transition(0.5s linear (0.5s + ($i - 1) * 0.1s));
    }
  }
}

Answer 2

我准备好的mixin在其他情况下很有用。

@mixin nthChildNav($item, $count) {
    $a-delay: 0.5s;
    $a-duration: 0.5s;

    @for $i from 1 through $count {
        #{$item}:nth-of-type(#{$i}) {
            a {
                @include transition($a-delay linear ($a-duration + ($i - 1) * 0.1));
            }
        }
        // @debug $i;
    }
}

.nav-main {
    @include nthChildNav(li, 5);
}

问候：）

SASS，延迟为每个列表项设置动画

2 个答案: