css - 我是否将供应商前缀的 LESS 过于复杂化了？

Question

我最近开始将 LESS 用于 CSS，想知道我的方法是否是通过创建我自己的 LESS“mixin”(我认为)来定位多个供应商前缀的正确方法？

.transition (@transition: 1s) {
transition: @transition;
-webkit-transition: @transition;
-moz-transition: @transition;
}

例如，如果我有一个 .btn 类并调用 .transition(有效)

 .btn:hover {
    color: red;
    .transition(@transition: 1s ease-in);
 }

还有动画。

@animate-fadein: fadeIn 1.7s linear;
.animation (@animation: fadeIn .2s linear) {
animation: @animation;
-webkit-animation: @animation;
-moz-animation: @animation;
-o-animation: @animation;
}

.btn

.btn {
 @animation(@animation: fadeIn .2s linear); 
}

顺便说一句，这个方法有效。我只是好奇。我的方法是否过于复杂，或者我只是在重新发明轮子？

Answer 1

好吧，使用 mixins 可以帮助您编写更多 DRY(不要重复自己)代码，所以这很好，也是您应该使用 Less 的主要原因。当您的需求发生变化(支持不同的浏览器)时，您只需更改您的混合(您也可以在您的元素中共享)。

请注意，可以在网上找到许多混合库，它们已经为您创建了这些前缀混合库。请参阅:http://lesscss.org/usage/#frameworks-using-less-mixin-libraries

正如@seven-phases-max 已经提到的，现在大多数人使用自动前缀后处理器来为他们的混入添加前缀。此外，Bootstrap 已将自动前缀集成到他们的 Grunt 构建过程中，以支持前缀混合(自版本 3.2 起)。最流行的自动前缀后处理器 ( https://github.com/postcss/autoprefixer ) 的唯一缺点是它需要安装 Node.js 并且不能与某些 alternative compilers 一起使用。 .

从 Less 的第 2 版开始，它的插件易于使用。 Less 为您提供autoprefix plugin也。可以通过运行 npm install -g less-plugin-autoprefix 安装此插件。安装后你可以运行例如 lessc --autoprefix="last 2 versions"main.less。

在使用 less.js 编译器编译 Less 代码客户端时，不会使用 Less autoprefix 插件。 -prefixfree在编译客户端时似乎是一个合理的选择。

关于您的供应商前缀的最后说明，在某些情况下，[优雅降级策略] ( https://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way#Graceful_degradation ) 将比尝试使用最新技术支持最旧的浏览器更好。