Установите меньше имя ключевого кадра с использованием Web Essentials 2012
-
21-12-2019 - |
Вопрос
Я пытаюсь создать анимационный загрузка Spinner в CSS, используя меньше, и я хотел бы иметь возможность динамически установить цвет спиннера, установив класс к элементу, отображающую спинровку. Я использую Web Esssentials 2012 для Visual Studio 2012 для создания и компиляции меньшего количества файлов.
Я новичок в меньшем порядке и не могу найти способ добавить динамические имена ключевых кадров. Рассмотрим следующий код:
Меньше :
@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);
}
}
.
Это компилирует следующий код:
.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;
}
}
.
Обратите внимание, как имя keyframes
является @name
вместо spinwhite
, что я бы хотел, чтобы это было. Согласно этому Так что Post, этот подход должен работать менее 1,7 .x и up, но согласно ChangeLog Web Essentials, компилятор, используемый в последней версии, это версия 1.6 .3.
У кого-нибудь есть представление о том, как заставить эту работу? Или это будет вопрос ждать и быть терпеливым, и надеясь, что Web Essentials будет обновлять свой компилятор?
Решение
Нашел рабочее решение, но он чувствует себя немного как «взлом».Я скачал последнюю версию Менее компилятор и перезаписанный, используемый Web Essentials, который найден в
Для нового компилятора для работы мне нужно было использовать одно и то же имя файла, что и существующий компилятор.После этого это было просто вопрос перезапуска Visual Studio и возобновляет мой менее файл.Сгенерированный CSS-файл теперь содержит код, который я ожидал и хотел.
до тех пор, пока Web Essentials обновляется с новым менее компилятором, это решение будет достаточно для меня.