使用较少CSS中的字符串连接类

Question

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

原始.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中有没有连接字符串和混合函数的方式呢？请记住，我完全是一个NEWB to 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);};
}

您还应该注意到，在大多数情况下，使用自动修复程序而不是混入库(如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);
  }
}