• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z pętlą for w Sass

0 głosów
88 wizyt
pytanie zadane 4 lutego 2018 w HTML i CSS przez povalor Nowicjusz (190 p.)
otagowane ponownie 4 lutego 2018 przez povalor

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.

 

 

1
komentarz 4 lutego 2018 przez JSHolic Szeryf (78,320 p.)

&[data-pos="$i"]

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

komentarz 4 lutego 2018 przez povalor Nowicjusz (190 p.)
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.

1 odpowiedź

0 głosów
odpowiedź 4 lutego 2018 przez JayJay Mądrala (5,930 p.)
wybrane 4 lutego 2018 przez povalor
 
Najlepsza

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_

komentarz 4 lutego 2018 przez povalor Nowicjusz (190 p.)
Dzięki, o to chodziło.

Podobne pytania

0 głosów
0 odpowiedzi 111 wizyt
pytanie zadane 28 września 2017 w HTML i CSS przez maly93 Użytkownik (640 p.)
0 głosów
0 odpowiedzi 107 wizyt
pytanie zadane 26 marca 2017 w HTML i CSS przez shslr Obywatel (1,310 p.)
0 głosów
0 odpowiedzi 68 wizyt
pytanie zadane 17 lutego 2017 w HTML i CSS przez shslr Obywatel (1,310 p.)
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

63,334 zapytań

109,595 odpowiedzi

228,945 komentarzy

44,062 pasjonatów

Przeglądających: 262
Pasjonatów: 20 Gości: 242

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...