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

Question

我已经查看了Blueprint、Less和SCSS，但似乎没有一个可以满足我的需求。这让我很难相信，因为处理供应商前缀是编写CSS中最令人沮丧的部分，所以任何编写CSS框架的人都应该首先解决这个问题。

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

谢谢。

- D-Nice

---

你看过Compass（Sass框架）吗？ - steveax

是的，我也看了指南针，但没有看到任何解决方案。 - D-Nice

从Compass文档 - Compass核心框架 - 导入：[CSS3 - 提供跨浏览器的CSS3 mixins，利用可用的预规范供应商前缀。]（http://compass-style.org/reference/compass/） - steveax

完美。Compass 工作得非常好。 - D-Nice

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处理您的代码 - 它会为您生成浏览器前缀（然后您需要将代码复制并粘贴回您的文件中）。

- ryankeairns

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

- Sergej Brazdeikis

---

那个链接看起来像是你自己的博客。如果是的话，你可能会想在答案中提到它。 - Flexo

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%;
}

- S0AndS0