Zaczynam bawić się Sassem i natrafiłem na problem z pętlą for. Napisałem taki kod:
@for $i from 0 through 3 {
&[data-pos="$i"] .slider__slides {
transform: translateX($i * -25%);
}
}
co zostało skompilowane na:
.slider[data-pos="$i"] .slider__slides {
transform: translateX(0%);
}
.slider[data-pos="$i"] .slider__slides {
transform: translateX(-25%);
}
.slider[data-pos="$i"] .slider__slides {
transform: translateX(-50%);
}
.slider[data-pos="$i"] .slider__slides {
transform: translateX(-75%);
}
a chciałbym osiągnąć:
.slider[data-pos="0"] .slider__slides {
transform: translateX(0%);
}
.slider[data-pos="1"] .slider__slides {
transform: translateX(-25%);
}
.slider[data-pos="2"] .slider__slides {
transform: translateX(-50%);
}
.slider[data-pos="3"] .slider__slides {
transform: translateX(-75%);
}
Nie wiem jak sprawić, aby zamiast "$i" wyświetlały się liczby od 0 do 3 w cudzysłowie. Pewnie głupie pytanie, bo już napisałem to bez pętli, ale jestem ciekawy czy jest to możliwe z użyciem pętli.