當創建SASS mixin時，我可以在一個：nth-​​child聲明中使用一個變量嗎？

Question

這是我寫的（.scss格式）的混入，但我得到這個錯誤：

Invalid CSS after "($x) ": expected expression (e.g. 1px, bold), was "{"

@mixin x_cards_wide($x) { 
    .card { 
    &:nth-child(-n + $x) { margin-top: 0; } 
    &:nth-child($x * n) { margin-right: 0; } 
    } 
} 

檢查出來的CodePen

Answer 1

你可以做到這一點使用interpolations：

@mixin x_cards_wide($x) { 
    .card { 
    &:nth-child(-n+#{$x}) { margin-top: 0; } 
    &:nth-child(#{$x}n) { margin-right: 0; } 
    } 
}