Omówienie kodu SCSS

Question

Witam, chciałbym nauczyć się na żywym przykładnie mniej więcej jak działa ten język programowania, znalazłem w internecie fajną pracę, pomyslałem że fajnie było by zrozumieć cały jej kod, jest to 20 linijek. Początek kodu jeszcze potrafię zrozumieć bo mam wiedzę w zakresie html, css zaś w tej pracy napotkałem zapisy obecnie mi nie znane. 

kod wygląda następująco (SCSS):

body,html{padding:0;margin:0;background:teal; overflow: hidden;}
svg{display:block;}
circle{ 
  animation: circles 2s alternate infinite cubic-bezier(.5,0,.5,1); 
  cy:15;
}
circle:nth-child(4n+1){fill:darkorange;}
circle:nth-child(4n+2){fill:gold;}
circle:nth-child(4n+3){fill:teal;}
circle:nth-child(4n+4){fill:tomato;}

@for $i from 0 through 45 {
  circle:nth-child(#{$i}) {
    animation-delay:-0.15s * $i;
    cx :61 - ($i * 2);
    r: 8.5 + (0.5 * $i);
  }
}

@keyframes circles { to {transform:translate(5%,30%);} }

 

Czym jest " 

circle:nth-child(4n+1)" 4n co to oznacza? 

oraz co mówi ten zapis : 

@for $i from 0 through 45 {
  circle:nth-child(#{$i}) {
    animation-delay:-0.15s * $i;
    cx :61 - ($i * 2);
    r: 8.5 + (0.5 * $i);
  }

 

oraz "$i" jest to pewnie zmienna tylko skąd ona się tam wzięła i co ona oznacza? 

Z góry wielkie dzięki ! :p 

 

 

Answer 1

circle:nth-child(4n+1)" 4n co to oznacza?

4n oznacza co 4 element. Akurat to jest część CSS-a, selektorów z CSS3 i można to znaleźć na MDN.

A ten kolejny zapis to po prostu pętla ;) $i wskazuje na pozycję w niej - tak, jak w innych językach 

Comments

r :61 - ($i * 2);
    cx: 8.5 + (0.5 * $i);

 

r i cx to z svg?

---

Tak samo jak circle ;)

---

Dzięki wielkie :)