Styl elementu na podstawie jego pozycji w grupie

Question

Próbuję utworzyć zestaw pól. Chcę spróbować sprawdzić, czy mogę ustawić rozmiar pudełka na podstawie jego pozycji w grupie.

Obecnie jest to możliwe, jeśli wiem liczbę skrzynek wcześniej i użyć selektora :nth-child() i odpowiednią pozycję.

Ponieważ CSS ma już możliwość znalezienia pozycji elementu w grupie, czy możliwe jest użycie tego pozycjonowania jako danych wejściowych dla rozmiaru.

Tak na przykład coś takiego

#boxes:nth-child() { 
    height:calc(n * 10); 
    width:calc(n * 10); 
} 

Cel ten można łatwo osiągnąć za pomocą kodu po stronie serwera lub nawet JavaScript, ale po prostu ciekawy zrozumieć, jeśli możemy użyć CSS, aby to osiągnąć, stosując calc lub jakąkolwiek inną cechę .

Answer 1

W selektorach CSS Level 3, nie ma żadnych metod kierowania elementu, używając zmiennych odpowiadających pozycji tego elementu w grupie, dostosowując style dla tego elementu.

W CSS funkcja calc() nie dopuszcza zmiennych. Jedynie wyrażenia matematyczne z dodawaniem (+), odejmowaniem (-), mno eniem (*) i dzieleniem (/) są dozwolone jako wartości składowe.

Z Sass jednak preprocesor CSS, za pomocą zmiennych w calc() funkcji jest możliwe.

Referencje:

• CSS Selectors Level 3
• 8.1. Mathematical Expressions: calc()
• Sass Variable in CSS calc() function
• Sass Variables

Answer 2

Nie można tego zrobić w czystym CSS, ale można z SCSS. Na przykład:

@for $i from 1 through 5 { 
    .box:nth-child(#{$i}) { 
    height: 50px * $i; 
    } 
} 

można odtwarzać z kodem here.