css - 在 LESS CSS 中将类与字符串连接起来

Question

我对 LESS 比较陌生。它令人印象深刻，到目前为止我真的很喜欢使用它，但我很想知道:我可以使用 mixin 函数产生的结果并将它们与字符串连接起来吗？我在 LESShat 中包含了一个示例，它提供了许多 Mixin 函数，包括一个生成关键帧动画的函数。问题是关键帧函数需要传递一个包含属性的字符串，我想使用 LESShat 库中的其他混合而不是 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 中是否有某种连接字符串和混合函数的方式？请记住，我完全是 NEWB to LESS。我宁愿不必编写自己的跨浏览器转换。如果它可以使用 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 而不是混合库(例如 Leshat)会更好。

你应该运行:

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