Question

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

Original .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传递其他mixins。那么，在LESS中是否有某种方式连接字符串和mixin函数？请记住，我是一个完全没法的NEWB。我只是不想编写自己的跨浏览器转换。如果它可以全部使用LESS自动化，那我会很酷。我显然做错了。

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

Answer 1

据我所知，您不应该使用skew() mixin内部或与keyframes mixin一起使用，根据您提及的文档，您应该使用：

.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而不是mixhat库（如Lesshat）会更好。

你应该跑：

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

使用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);
  }
}

在LESS CSS中使用字符串连接类

1 个答案: