我过于复杂我的LESS供应商前缀？ [英] Am I overcomplicating my LESS for vendor prefixes?

问题描述

我最近开始使用LESS，并且想知道我的方法是否是通过创建我自己的LESSmixin来定位多个供应商前缀的正确方法？

I've started using LESS for CSS lately and was wondering if my method is the correct way to target multiple vendor prefixes by creating my own LESS "mixin" (I think)?

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

所以如果我例如有一个.btn类并调用.transition （工作）

So if I were for example to have a .btn class and call .transition (which works)

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

这种方法适用。我只是好奇。是我的方法过于复杂的事情，或者我只是重新发明的轮子？

This method works by the way. I'm just curious. Is my method over-complicating things and or am I just reinventing the wheel?

推荐答案

好吧，使用mixins可以帮助你编写更多的DRY（不要重复自己），所以这是好的，为什么你应该使用Less。
当你的需求改变时（不同的浏览器支持），你只需要改变你的mixin（你可以在你的项目中共享）。

Well, using mixins help you to code more DRY (Don't repeat yourself), so that's good and the main reason why you should use Less. When your requirements change ( different browser to support) you will only have to change your mixins (which you can share over your projects too).

有许多mixin库在网上找到已经为您创建这些前缀混合。请参阅： http://lesscss.org/usage/#frameworks-usingless -mixin-libraries

Notice that there are many mixin libraries to find on the web which have already create these prefix mixins for you. See: http://lesscss.org/usage/#frameworks-using-less-mixin-libraries

正如@ seven-phases-max已经提到的，现在大多数人都使用autoprefix后处理器来为它们的mixins做前缀。此外，Bootstrap已将自动融合程序集成到其Grunt构建过程中，以支持前缀混合（从3.2版开始）。最受欢迎的自动前缀后处理程序（ https://github.com/postcss/autoprefixer ）的唯一缺点是因为它需要安装Node.js，不能与某些其他编译器。

As already mentioned by @seven-phases-max, nowadays most people use autoprefix postprocessors to prefix their mixins. Also Bootstrap have integrate the autoprefixer into their Grunt build process in favor of the prefix mixins (since version 3.2). The only disadvantage of the most popular autoprefix postprocessor (https://github.com/postcss/autoprefixer) will be that it require Node.js installed and can not be used with some alternative compilers.

自Less以来，它易于使用的插件。较少为您提供 autoprefix插件。这个插件可以通过运行 npm install -g less-plugin-autoprefix 来安装。安装后你可以运行 lessc --autoprefix =last 2 versionsmain.less 。

Since version 2 of Less its easy to use plugins. Less provide you an autoprefix plugin too. This plugin can be installed by running npm install -g less-plugin-autoprefix. After installing you can run for instance lessc --autoprefix="last 2 versions" main.less.

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

The Less autoprefix plugin an not use when compiling your Less code client side with the less.js compiler. -prefixfree seem to be a reasonable alternative when compiling Client side.

在某些情况下，请注意您的供应商前缀[优雅降级策略]（ https://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way#Graceful_degradation ）会比尝试使用最新技术支持最旧的浏览器更好。

Last note about your vendor prefixes in some situations a [Graceful degradation strategy] (https://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way#Graceful_degradation) will be better than trying to support even the most old browser with newest technologies.

这篇关于我过于复杂我的LESS供应商前缀？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！