Există vreo modalitate de a genera un număr aleatoriu într-un anumit interval folosind doar CSS? (Programare, Css, Random, Numere)

Alexcamostyle a intrebat.

De exemplu, ceva de genul:

div {
   margin-left: random(-100, 100);
}

Comentarii

  • De ce nu poți folosi javascrtipt? –  > Por pppery.
  • @ppperry: Pot, dar mi se pare mai degrabă ineficient. Ar trebui să existe o modalitate de a genera numere aleatoare în CSS, așa cum poți face matematică în el cu Calc(). –  > Por Alexcamostyle.
  • Exact ceea ce faci tu nu este posibil în CSS pur, însă ceva similar este 😛 –  > Por Zach Saucier.
2 răspunsuri
Josh Crozier

Nu există în prezent nici o modalitate de a face acest lucru în CSS pur, totuși, dacă utilizați un pre-procesor CSS, cum ar fi LESS, atunci puteți face următoarele:

@randomMargin: `Math.round(Math.random() * 100)`;

div {
  margin-left: ~'@{randomMargin}px';
}

Motivul pentru care acest lucru funcționează este că LESS va evalua expresiile JavaScript.

Dacă doriți să o rupeți într-un mixin/funcție aleatorie, ați putea folosi:

.random(@min, @max) {
  @random: `Math.round(Math.random() * (@{max} - @{min}) + @{min})`;
}

div {
  .random(-100, 100);
  margin-left: ~'@{random}px';
}

Care se va compila cu un alt margin-left valoare diferită de fiecare dată:

div {
  margin-left: 18px;
}

Cu toate acestea, nu sunt sigur cât de practic ar fi acest lucru într-un mediu de producție, deoarece CSS-ul dvs. ar trebui să fie să fie deja compilat/minificat, mai degrabă decât compilat din mers. Prin urmare, ar trebui să folosiți doar JavaScript direct pentru a realiza acest lucru.

Lucky Chingi

Nu cred că CSS are această capacitate, dar LESS vă va ajuta.

http://csspre.com/random-numbers/