Problem z pętlą for w Sass

Question

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.

 

 

Comments

&[data-pos="$i"]

Spróbuj usunąć cudzysłowy przy $i (żeby nie był to string).

---

Właśnie nie działa, nie chce się kompilować. No i ogólnie ma to być liczba w cudzysłowie, więc gdzieś ten cudzysłów musi być zawarty.

Answer 1

Odwołanie do zmiennej $zmienna musisz umieścić w klamrach {} poprzedzonych kratką #,  np :

xyz ="#{$zmienna}"

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

Comments

Dzięki, o to chodziło.