Cuando HTML5 era más HTML5 que nunca…¡bucles for en CSS3…Saas!

¿Quieres novedades? ¿Te interesa el HTML5?

Cuando escribíamos nuestras hojas de estilos para separar…eso, nuestros estilos: colores, fuentes, anchos, altos, alineaciones….llegaron los @keyframes para además añadir movimiento a nuestro HTML…pero no se quedó ahí la cosa, es entonces cuando apareció el bucle for y las variables para hacerlo más bonito todavía:

HTML->

.scene

  -(2..15).each do |i|

    .assembly

      .strip

      .roller

        -(1..i).each do |j|

          .side

CSS->

$ri: 2em;

$c: cyan;

html, body { height: 100%; }

body {

  overflow: hidden;

  margin: 0;

  perspective: 10em;

  perspective-origin: 50% 0%;

  background: white;

  color: $c;

}

.scene {

  &, * {

    box-sizing: border-box;

    position: absolute;

    top: 50%; left: 50%;

    transform-style: preserve-3d;

  }

  transform: translate(4em, 10em) rotateX(75deg) rotate(-22.5deg)

}

.assembly {

  @for $i from 1 to 15 {

    $ca: 360deg/($i + 1);

    $l: 2*$ri*(if($i != 1, tan($ca/2), 2));

    $rc: $ri/(if($i != 1, cos($ca/2), .5));

    &:nth-child(#{$i}) {

      transform: translate(0, -3.5*$i*$ri);

      animation: slide#{$i} 1s ease-in-out infinite;

      @at-root {

        @keyframes slide#{$i} {

          to { transform: translate($l, -3.5*$i*$ri); }

        }

      }

      .strip { background-size: $l 100%; }

      .roller {

        transform: rotateY($ca/2) translateZ($rc) rotateY(-$ca/2);

        animation: inherit;

        animation-name: roll#{$i};

        @at-root {

          @keyframes roll#{$i} {

            to {

              transform: rotateY(-$ca/2) 

                         translateZ($rc) rotateY(-$ca/2);

            }

          }

        }

      }

      .side {

        margin: –$ri (-$l/2);

        width: $l; height: 2*$ri;

        @for $j from 0 to $i + 1

         {

          &:nth-child(#{$j + 1})

         {

            transform: rotateY($j*$ca) 

                       if($i != 1, translateZ(-$ri), ());

          }

        }

      }

    }

  }

}

.strip {

  margin: –$ri -1px;

  width: 120em; height: 2*$ri;

  border: solid .125em $c;

  background-image:

    linear-gradient(90deg, $c .125em, transparent 0);

  background-position: -1px 0;

}

.side {

  border: solid .125em $c;

  &:before, &:after {

    position: absolute;

    left: 0;

    width: inherit; height: .125em;

    background: $c;

    transform: rotateX(90deg);

    content: »;

  }

  &:before { top: -1px; }

  &:after { bottom: -1px; }

}

Para verlo en acción:

http://codepen.io/thebabydino/full/lhKjt

¡Que aproveche!