0

我对LESS比较陌生。这令人印象深刻，到目前为止我真的很喜欢使用它，但我很想知道：我可以使用 mixin 函数产生的结果并将它们与字符串连接起来吗？我包含了一个 LESShat 示例，它提供了许多 Mixin 函数，包括一个生成关键帧动画的函数。问题是关键帧函数需要传递一个包含属性的字符串，我想使用 LESShat 库中的其他 mixin 而不是 css 属性来生成这样的关键帧动画。

原始 .less 文件：

@import "css/lesshat.less";
.keyframes(~'myskew, from {.skew(0)} to {.skew(90)}');
.myskewclass {
  .animation(myskew 3s linear alternate)
}

生成的 .css 文件：

lesshat-selector{-lh-property:0}
@-webkit-keyframes myskew{from{.skew(0)}to{.skew(90)}}
@-moz-keyframes myskew{from{.skew(0)}to{.skew(90)}}
@-o-keyframes myskew{from{.skew(0)}to{.skew(90)}}
@keyframes myskew{from{.skew(0)}to{.skew(90)}}
.myskewclass{
-webkit-animation:myskew 3s linear alternate;
-moz-animation:myskew 3s linear alternate;
-o-animation:myskew 3s linear alternate;
animation:myskew 3s linear alternate
}

显然不是我想要的，因为关键帧动画仍然包含倾斜函数，而不是倾斜函数返回的值。我相信问题可能是我试图从字符串内部的 LESShat 传递其他混合。那么，LESS 中是否有某种连接字符串和混合函数的方式？请记住，我是 LESS 的新手。我宁愿不必编写自己的跨浏览器转换。如果这一切都可以使用 LESS 实现自动化，那我会很酷。我显然做错了。

以下链接描述了 LESShat 中的 .keyframes 和 .skew 函数，但我没有看到关于混合提到的两者。也许我不知何故错过了那部分。 https://github.com/madebysource/lesshat/blob/master/README.md

4

1 回答 1

0

据我了解，根据您提到的文档，您不应skew()在内部或与 mixin 一起使用keyframesmixin，您应该使用：

.keyframes(~'animationName, 0%{ transform: skewX(0); } 100%{ transform: skewX(90deg) }');

上面将输出以下 CSS 代码：

lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes animationName{ 0%{ -webkit-transform: skewX(0); } 100%{ -webkit-transform: skewX(90deg) }}
@-moz-keyframes animationName{ 0%{ -moz-transform: skewX(0); } 100%{ -moz-transform: skewX(90deg) }}
@-o-keyframes animationName{ 0%{ -o-transform: skewX(0); } 100%{ -o-transform: skewX(90deg) }}
@keyframes animationName{ 0%{-webkit-transform: skewX(0);-moz-transform: skewX(0);-ms-transform: skewX(0);transform: skewX(0); } 100%{-webkit-transform: skewX(90deg);-moz-transform: skewX(90deg);-ms-transform: skewX(90deg);transform: skewX(90deg);};
}

您还应该注意到，在大多数情况下，使用 autoprefixer 而不是像 Lesshat 这样的 mixin 库会是更好的做法。

你应该运行：

npm install less
npm install less-plugin-autoprefix
less input.less --autoprefix

使用自动前缀插件：

@keyframes myskew {
  0% {
    transform: skewX(0);
  }
  100% {
    transform: skewX(90deg);
  }
}

编译成：

@-webkit-keyframes myskew {
  0% {
    -webkit-transform: skewX(0);
            transform: skewX(0);
  }
  100% {
    -webkit-transform: skewX(90deg);
            transform: skewX(90deg);
  }
}
@keyframes myskew {
  0% {
    -webkit-transform: skewX(0);
            transform: skewX(0);
  }
  100% {
    -webkit-transform: skewX(90deg);
            transform: skewX(90deg);
  }
}
于 2015-02-12T19:26:30.157 回答