Ich versuche Padding mit For-Schleife in Sass zu multiplizieren, aber es passiert nicht

Question

Mit Hilfe von @for-Schleife in SASS möchte ich Padding (Pixel-Einheit) auf meiner Liste durch Multiplikation für jede Ebene anwenden, aber es gibt mir Rohausgabe . Mein SASS-Code ist:

@for $i from 1 through 5 { 
.chapter-summary { 
    &:nth-child(#{$i}) { 
     padding-bottom: (10px) * #{$i}; 
    } 
} 

}

und sein gibt mir folgende Ausgabe:

.chapter-summary:nth-child(1) { 
    padding-bottom: 10px * 1; 
} 

.chapter-summary:nth-child(2) { 
    padding-bottom: 10px * 2; 
} 

.chapter-summary:nth-child(3) { 
    padding-bottom: 10px * 3; 
} 

.chapter-summary:nth-child(4) { 
    padding-bottom: 10px * 4; 
} 

.chapter-summary:nth-child(5) { 
    padding-bottom: 10px * 5; 
} 

Benötigen Sie eine Lösung

Answer 1

Ok guyz ich die Lösung habe, und das ist, wie folgend:

@for $i from 1 through 5 { 
    .chapter-summary { 
     &:nth-child(#{$i}) { 
      padding-bottom: #{$i * 10px}; 
     } 
    } 
}