導致編譯錯誤的關鍵幀循環動畫

Question

我正在嘗試創建較少的循環，以便使用CSS爲硬幣左側和頂部位置設置動畫。我創建了一些少mixin，創建一個關鍵幀並將其分配給當前元素，但我得到的是較少的錯誤。 有人可以說，這段代碼有什麼問題嗎？

.boom (@index) when (@index > 0){ 
    @keyframes boom@index { 
     0% { 
      top: 50%; 
      left: 50%; 
     } 
     50%{ 
      top: random(2500)+px; 
      left: random(2500)+px; 
     } 
    } 
    .coin:nth-child(@{@]index}){ 
     left: unit(@{i}* 10, px); 
     animation-duration: 2.6s; 
     animation-name: boom-@{i}; 
     animation-direction: alternate; 
     animation-timing-function: ease-in-out; 
    } 
    .boom(@index - 1); 
} 
.boom(5); 

Answer 1

我認爲有一對夫婦在問題給出@{i}代碼錯字的錯誤在一些地方被使用。我認爲他們打算是@{index}。

除此之外，下面分別更正：

• 當你給@keyframes boom@index，首先你必須使用變量的形式@{}因爲變量是在選擇所用的（排序）。這是爲了避免少編譯器對待它，就像它是一個CSS @規則。
• 之後，在.coin:nth-child(@{@]index})行中再次出現輸入錯誤。有一個額外的@和]括號。
• 最後，即使我們忽略了@{i}和@{index}的混淆，代碼animation-name: boom-@{i};也會導致問題，因爲當您試圖將一個變量與一個字符串連接而不用引號括起來時，它會產生一個錯誤。
• 注：random(2500)+px不會造成任何編譯錯誤，但沒有內置random()功能越來越+不用於字符串連接（除非您使用LessPHP像被提到的七個階段-Max在評論） 。我想你可能正在尋找類似unit(`Math.random(2500)`,px)的東西。

.boom (@index) when (@index > 0){ 
    @keyframes ~"boom@{index}" { 
     0% { 
      top: 50%; 
      left: 50%; 
     } 
     50%{ 
      top: random(2500)+px; 
      left: random(2500)+px; 
     } 
    } 
    .coin:nth-child(@{index}){ 
     left: unit(@index * 10, px); 
     animation-duration: 2.6s; 
     animation-name: ~"boom-@{index}"; 
     animation-direction: alternate; 
     animation-timing-function: ease-in-out; 
    } 
    .boom(@index - 1); 
} 
.boom(5);