Situado a MENOS de keyframe nome usando Web Essentials 2012
-
21-12-2019 - |
Pergunta
Eu estou tentando criar uma animação de carregamento giratório em CSS usando MENOS e que eu gostaria de ser capaz de definir dinamicamente a cor do spinner através da definição de uma classe para o elemento de apresentar o spinner.Eu estou usando Web Essentials 2012 para o Visual Studio 2012 para a criação e compilação de MENOS arquivos.
Eu sou novo para MENOS e não consigo encontrar uma maneira de adicionar dinâmica keyframe nomes.Considere o seguinte 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);
}
}
Isso compila o código a seguir:
CSS (eu deixei de fora o fornecedor de todas as específicas keyframe anotações para facilitar a leitura):
.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;
}
}
Observe como o keyframes
o nome é @name
em vez de spinwhite
o que eu gostaria que ele fosse.De acordo com este ENTÃO, post, esta abordagem deve estar funcionando em MENOS 1.7.x e para cima, mas de acordo com o changelog da Web Essentials, o compilador usado na versão mais recente é a versão 1.6.3.
Alguém tem uma idéia de como obter esse trabalho?Ou é apenas vai ser uma questão de esperar e ser paciente e esperando Web Essentials vai estar atualizando seu compilador?
Solução
Encontrada uma solução de trabalho, mas ele se sente um pouco como um "hack".Eu fiz o download do mais recente MENOS compilador e substituído o utilizado pelo Web Essentials, que é encontrado em C:\Users[USUÁRIO]\AppData\Local\Microsoft\VisualStudio\11.0\Extensions\[ALGUNS CARACTERES APARENTEMENTE ALEATÓRIOS] esources\Scripts com nome de ficheiro less-1.6.3.min.js.
Para o novo compilador para o trabalho que eu tive que usar o mesmo nome como o existente compilador.Depois que ele foi apenas uma questão de reiniciar o Visual Studio e salvando o meu a MENOS de arquivo.O CSS gerado arquivo contém o código que eu esperava e queria.
Até Web Essentials é atualizado com a nova MENOS de compilador, essa solução vai ser suficiente para mim.