Question

我最近开始使用LESS for 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的主要原因。当您的需求发生变化时（不同的浏览器支持），您只需要更改mixin（您也可以在项目中共享）。

请注意，网上有很多mixin库可以为你创建这些前缀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.js编译器编译Less代码客户端时，不使用Less autoprefix插件。在编译客户端时，-prefixfree似乎是一个合理的选择。

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

我是否因供应商前缀而过度复杂？

1 个答案: