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 vendor prefix存储库的集合，下面是从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自动处理供应商前缀？

3 个答案: