Question

我尝试使用LESS在CSS中创建动画加载微调器，我希望能够通过将类设置为显示微调器的元素来动态设置微调器的颜色。我在Visual Studio 2012中使用Web Essentials 2012来创建和编译LESS文件。

我是LESS的新手，似乎无法找到添加动态关键帧名称的方法。请考虑以下代码：

LESS ：

@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);
    }
}

这将编译为以下代码：

CSS（为了便于阅读，我省略了所有供应商特定的关键帧表示法）：

.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我想要的是什么。根据这篇SO帖子，这种方法应该在LESS 1.7.x及更高版本中工作，但根据Web Essentials的changelog，最新版本中使用的编译器是版本1.6.3。 / p>

有没有人知道如何让这个工作？或者只是等待和耐心，并希望Web Essentials将更新其编译器？

Answer 1

找到了一个有效的解决方案，但感觉有点像＆＃34; hack＆＃34;。我已下载最新的LESS-compiler并覆盖了Web Essentials使用的版本，该内容位于 C：\ Users [USER] \ AppData \ Local \ Microsoft \ VisualStudio \ 11.0 \ Extensions \ [一些看似随机的字符] \ Resources \ Scripts ，文件名 less-1.6.3.min.js 。

为了让新编译器工作，我必须使用与现有编译器相同的文件名。之后，只需重新启动Visual Studio并重新保存LESS文件即可。生成的CSS文件现在包含我期望和想要的代码。

在使用新的LESS编译器更新Web Essentials之前，此解决方案对我来说已经足够了。

使用Web Essentials 2012设置LESS关键帧名称

1 个答案: