css - 自动处理供应商前缀的 CSS 框架？

Question

我查看了 Blueprint、Less 和 SCSS，但它们似乎都没有做我想要的。我觉得这很难相信，因为处理供应商前缀是编写 CSS 最令人沮丧的部分，所以这似乎是任何编写 CSS 框架的人都应该解决的第一个问题。

我想知道，是否有一个我可以使用的框架（或 rails gem），它允许我编写border-radius:5px，然后让我假设它将创建一个具有所有正确供应商前缀的规则？

谢谢

Answer 1

实际上，您可以使用 LESS Mixin 很容易地做到这一点 - 基本上您只需编写一次，然后从那里开始，您只需一行即可应用它。像这样：

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

然后，您只需在需要边界半径的地方执行此单线：

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

如果您还没有准备好 LESS，那么您可以通过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%;
}