CSS框架，自动处理供应商前缀？(CSS Framework that automatically

我已经看了图纸，少，和SCSS他们都不似乎做我想做的。我觉得这很难相信，因为处理供应商前缀是写CSS的最令人沮丧的一部分，所以它似乎是是第一个问题的人谁写CSS框架应该解决的问题。

我想知道，是否有一个框架（或滑轨宝石），我可以使用，这让我写border-radius:5px ，然后让我假定这将创建与所有适当的供应商前缀的规则？

谢谢

Answer 1:

实际上，你可以用较低的Mixin做到这一点很容易 - 基本上你写了一次，从那里出来，你有一条线应用它。像这样：

// Border Radius
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

然后你symply做到这一点的一行，你需要一个边界半径：

.classname {
  .border-radius(5px);
}

如果你还没有准备好少，那么你可以通过只处理您的代码Prefixr -它会为您生成浏览器前缀（那么你必须将代码复制粘贴到您的文件）。

Answer 2:

您可以使用： http://sjevsejev.blogspot.com/2012/07/lessjs-function-generates-prefixes-for.html

那么这将是足够使用：

.pf('transition','all 1s ease-in-out');
.pf('border-radius',3px);
.pf('box-shadow','2px 2px 5px 0 rgba(0,0,0,.6)');
.pf('flex', 1);

Answer 3:

也许最近公布的集合scss到css 供应商名称资源库可能会感兴趣，以下是从拉border-radius.scss文件...

@mixin border-radius($value) {
  @include render-vendor-prefixes(
    $property: border-radius,
    $value: $value,
    $vendor-list: (
      -webkit,    // Android 2.1, Chrome 5.0/4.0, iOS 3.2-, Safari 5.0/3.1,
      -moz,       // Firefox 4.0/3.0
    ),
    $prefix: property,
  );
}

使用上述@mixin可能看起来像...

@import '_scss/modules/vendor-prefixes/lib/map-vendor-prefixes.scss';
@import '_scss/modules/vendor-prefixes/lib/render-vendor-prefixes.scss';

@import '_scss/modules/vendor-prefixes/calc.scss';


.something {
  @include border-radius(10% 30% 50% 70%);
}

...和完整性，上述规定对...

.something {
  -webkit-border-radius: 10% 30% 50% 70%;
     -moz-border-radius: 10% 30% 50% 70%;
          border-radius: 10% 30% 50% 70%;
}

文章来源: CSS Framework that automatically handles vendor prefixes?