2016-12-15 7 views
-3

SASSコードでCSSクラスが生成されており、うまくいきます。それはforループと簡単な数式を持っています。SASSの数式をLESSに変換する

私はそれをLESSに変換したいのですが、私はそれを自分で完了できません。以下のコードを見てください。

SASSが行っていたように、これをどのようにして低コードに変換できますか?

@for $i from 1 through (($point-count + 1)/2) { 
    &:nth-of-type(#{$i}) { 
     transform: rotate(360deg/$point-count * ($i - 1)); 
    } 

    &:nth-of-type(#{$i + $point-count/2}) { 
     transform: rotate(180deg + 360deg/$point-count * ($i - 1)); 
    } 

    &:nth-of-type(#{$i}), &:nth-of-type(#{$i + $point-count/2}) { 
     &:before { 
      animation-delay: - $spin-animation-time + ($spin-animation-time/$point-count * 2 * ($i - 1)); 
     } 
    } 
} 
+0

あなたは、LESSで、単純な[ループ](http://lesscss.org/features/#loops-feature)をコーディングすることはできますか?変数の補間を管理する(ループの外側から始める)? – FelipeAls

答えて

0
.loop(@i) when (@i < (@point-count + 1)/2) { 
    .loop((@i + 1)); 

    &:nth-of-type(@{i}) { 
     transform: rotate(360deg/@point-count * (@i - 1)); 
    } 

    @index: @i + @point-count/2; 

    &:nth-of-type(@{index}) { 
     transform: rotate(180deg + 360deg/@point-count * (@i - 1)); 
    } 

    &:nth-of-type(@{i}), 
    &:nth-of-type(@{index}) { 
     &:before { 
      animation-delay: - @spin-animation-time + (@spin-animation-time/@point-count * 2 * (@i - 1)); 
     } 
    } 
} 

.loop(1) 
関連する問題