Usa valore nth-child come variabile SASS

Question

C'è un modo per utilizzare il valore nth-child come variabile SASS?

Esempi di utilizzo:

div:nth-child(n) { 
    content: '#{$n}' 
} 

div:nth-child(n) { 
    background: rgb(#{$n}, #{$n}, #{$n}); 
} 

Answer 1

Io non credo che ci sia un modo per fare esattamente questo. Ma è possibile utilizzare @for direttiva per scorrere un numero noto di elementi:

$elements: 15; 
@for $i from 0 to $elements { 
    div:nth-child(#{$i}) { 
    background: rgb($i, $i, $i); 
    } 
} 

Answer 2

È possibile utilizzare un mixin come questo:

@mixin child($n) { 
    &:nth-child(#{$n}){ 
      background-color:rgb($n,$n,$n); 
    } 
} 

div{ 
    @include child(2); 
    } 

il CSS compilato assomiglia:

div:nth-child(2) { 
    background-color: #020202; 
} 

vedere un esempio here