我是否过度减少了供应商前缀的LESS？

我最近开始对CSS使用LESS，并想知道如果我的方法是通过创建我自己的LESS“mixin”（我认为）来定位多个供应商前缀的正确方法？我是否过度减少了供应商前缀的LESS？

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

此方法的方式。我只是好奇。我的方法是过度复杂的事情，或者我只是重新发明轮子？

来源

2014-04-04 Monstr92

[Autoprefixer]（https://github.com/ai/autoprefixer），[-prefix-free]（https://github.com/LeaVerou/prefixfree）。那么，对于任何发现CSS预处理器mixins的人来说，这是一个普遍的举动（“哇！现在我可以把所有的前缀放到mixin中”）。每个人都（并且仍然这样做，）！ –

所以这是一个有效的方法？：3 – Monstr92

那么，这取决于你如何定义“正确”。通常情况下，如果您的Less代码编译为您想要的CSS代码，并且按照您期望的方式工作，那么它如何可能不正确？ –

好吧，使用mixins可以帮助您编写更多DRY（不要重复自己），所以这很好，也是您使用Less的主要原因。当你的需求改变时（不同的浏览器支持），你只需要改变你的mixins（你也可以分享你的项目）。

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

正如@ seven-phases-max所提到的，时下大多数人使用autoprefix后处理器来为其mixin添加前缀。另外Bootstrap已经将autoprefixer整合到他们的Grunt构建过程中，以支持前缀mixins（自3.2版以来）。最流行的autoprefix后处理器（https://github.com/postcss/autoprefixer）的唯一缺点是它需要安装Node.js，并且不能用于某些alternative compilers。

自第2版以来，其易于使用的插件。少提供你也autoprefix plugin。这个插件可以通过运行npm install -g less-plugin-autoprefix来安装。安装后，你可以运行例如lessc --autoprefix="last 2 versions" main.less。

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

在某些情况下，[优雅降级策略]（https://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way#Graceful_degradation）的最后一个注意事项要比试图用最新技术支持最老的浏览器要好。

来源

2014-11-04 14:09:13

我是否过度减少了供应商前缀的LESS？

回答

相关问题