Establecer menos nombre de fotogramas clave usando webs esenciales 2012

Question

Estoy tratando de crear un spinner de carga animadora en CSS usando menos y me gustaría poder establecer dinámicamente el color del Spinner al configurar una clase al elemento que muestra el Spinner. Estoy usando webs essalss 2012 para Visual Studio 2012 para la creación y compilación de menos archivos.

Soy nuevo en menos y parece que no puedo encontrar una manera de agregar nombres de fotogramas clave dinámicos. Considere el siguiente código:

menos :

@white: #FFF;

.Spin(@color)
{
    0%, 100%
    {
        box-shadow: 0em -3em 0em 0.2em @color, 2em -2em 0 0em @color, 3em 0em 0 -0.5em @color, 2em 2em 0 -0.5em @color, 0em 3em 0 -0.5em @color, -2em 2em 0 -0.5em @color, -3em 0em 0 -0.5em @color, -2em -2em 0 0em @color;
    }

    12.5%
    {
        box-shadow: 0em -3em 0em 0em @color, 2em -2em 0 0.2em @color, 3em 0em 0 0em @color, 2em 2em 0 -0.5em @color, 0em 3em 0 -0.5em @color, -2em 2em 0 -0.5em @color, -3em 0em 0 -0.5em @color, -2em -2em 0 -0.5em @color;
    }

    25%
    {
        box-shadow: 0em -3em 0em -0.5em @color, 2em -2em 0 0em @color, 3em 0em 0 0.2em @color, 2em 2em 0 0em @color, 0em 3em 0 -0.5em @color, -2em 2em 0 -0.5em @color, -3em 0em 0 -0.5em @color, -2em -2em 0 -0.5em @color;
    }

    37.5%
    {
        box-shadow: 0em -3em 0em -0.5em @color, 2em -2em 0 -0.5em @color, 3em 0em 0 0em @color, 2em 2em 0 0.2em @color, 0em 3em 0 0em @color, -2em 2em 0 -0.5em @color, -3em 0em 0 -0.5em @color, -2em -2em 0 -0.5em @color;
    }

    50%
    {
        box-shadow: 0em -3em 0em -0.5em @color, 2em -2em 0 -0.5em @color, 3em 0em 0 -0.5em @color, 2em 2em 0 0em @color, 0em 3em 0 0.2em @color, -2em 2em 0 0em @color, -3em 0em 0 -0.5em @color, -2em -2em 0 -0.5em @color;
    }

    62.5%
    {
        box-shadow: 0em -3em 0em -0.5em @color, 2em -2em 0 -0.5em @color, 3em 0em 0 -0.5em @color, 2em 2em 0 -0.5em @color, 0em 3em 0 0em @color, -2em 2em 0 0.2em @color, -3em 0em 0 0em @color, -2em -2em 0 -0.5em @color;
    }

    75%
    {
        box-shadow: 0em -3em 0em -0.5em @color, 2em -2em 0 -0.5em @color, 3em 0em 0 -0.5em @color, 2em 2em 0 -0.5em @color, 0em 3em 0 -0.5em @color, -2em 2em 0 0em @color, -3em 0em 0 0.2em @color, -2em -2em 0 0em @color;
    }

    87.5%
    {
        box-shadow: 0em -3em 0em 0em @color, 2em -2em 0 -0.5em @color, 3em 0em 0 -0.5em @color, 2em 2em 0 -0.5em @color, 0em 3em 0 -0.5em @color, -2em 2em 0 0em @color, -3em 0em 0 0em @color, -2em -2em 0 0.2em @color;
    }
}

.Keyframes(@name, @color)
{
    @-webkit-keyframes @name { .Spin(@color); }
    @-moz-keyframes @name { .Spin(@color); }
    @-ms-keyframes @name { .Spin(@color); }
    @-o-keyframes @name { .Spin(@color); }
    @keyframes @name { .Spin(@color); }
}

.Animate(@name, @color)
{
    .Keyframes(@name, @color);
    animation: 1.3s linear 0s normal none infinite @name;
    -moz-animation: 1.3s linear 0s normal none infinite @name;
    -o-animation: 1.3s linear 0s normal none infinite @name;
    -webkit-animation: 1.3s linear 0s normal none infinite @name;
}

.loading
{
    display: inline-block;
    padding-left: 2.5em;
    position: relative;
    -webkit-backface-visibility: hidden;
    cursor: default !important;

    &:before
    {
        border-radius: 50%;
        content: "";
        font-size: 0.2em;
        height: 1em;
        left: 0;
        margin: 5em auto 5em 5em;
        position: absolute;
        top: 0;
        width: 1em;
    }

    &.white:before
    {
        .Animate(spinwhite, @white);
    }
}

Esto se compila al siguiente código:

CSS (he dejado fuera todas las notaciones de fotograma clave específicas del proveedor para la legibilidad) :

.loading {
  display: inline-block;
  padding-left: 2.5em;
  position: relative;
  -webkit-backface-visibility: hidden;
  cursor: default !important;
}
.loading:before {
  border-radius: 50%;
  content: "";
  font-size: 0.2em;
  height: 1em;
  left: 0;
  margin: 5em auto 5em 5em;
  position: absolute;
  top: 0;
  width: 1em;
}
.loading.white:before {
  animation: 1.3s linear 0s normal none infinite spinwhite;
  -moz-animation: 1.3s linear 0s normal none infinite spinwhite;
  -o-animation: 1.3s linear 0s normal none infinite spinwhite;
  -webkit-animation: 1.3s linear 0s normal none infinite spinwhite;
}
@keyframes @name {
  0%,
  100% {
    box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
  }
  12.5% {
    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  25% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  37.5% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  50% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  62.5% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  75% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
  }
  87.5% {
    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
  }
}

Nota Cómo el nombre de GeneracDicEtGode es keyframes en lugar de @name, me gustaría que sea. Según este SO POST, este enfoque debería estar trabajando en menos 1.7 .x y arriba, pero de acuerdo con la changelog de webs esenciales, el compilador utilizado en la última versión es la versión 1.6 .3.

¿Alguien tiene una idea de cómo hacer esto funcionando? ¿O solo va a ser una cuestión de esperar y ser paciente y esperar que las webs esenciales actualicen su compilador?

Answer 1

Encontré una solución de trabajo, pero se siente un poco como un "hack".He descargado el último menos compilador y sobrescrito el utilizado por webs esenciales web, que se encuentra en c: \ usuarios [Usuario] \ AppData \ Local \ Microsoft \ visualStudio \ 11.0 \ Extensions \ [Algunos caracteres aparentemente aleatorios] \ Recursos \ Scripts con nombre de archivo menos-1.6.3.min.js .

Para que el nuevo compilador funcione, tuvo que usar el mismo nombre de archivo que el compilador existente.Después de eso, fue solo una cuestión de reiniciar Visual Studio y visando mi menos archivo.El archivo CSS generado ahora contiene el código que esperaba y quería.

Hasta que las webs esenciales se actualizan con el nuevo compilador menos, esta solución será suficiente para mí.