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

【问题标题】：Concatenate Classes with strings in LESS CSS在 LESS CSS 中使用字符串连接类
【发布时间】：2015-02-12 14:56:43
【问题描述】：

我对 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

【问题讨论】：

实际上他们的示例显示了.background-image(linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%))，所以您的.myskewclass 似乎有正确的语法？我不知道我从来没有用过lesshat
有人可能会这么认为，但是如果您分析文档，则不需要@符号。来自 LESShat 的文档：
是的，根据他们的文档，我看到并更新了我的 cmets，看来你所拥有的应该可以工作。您是否 100% 确定导入工作正常？
在这种情况下的问题是关键帧混合接受一个字符串，而不是传递实际的类。我只是想知道是否可以将其他混合产生的结果与关键帧混合所需的字符串连接起来。

标签： css less lesshat

【解决方案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 这样的 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);
  }
}

【讨论】：