CSS Framework that automatically handles vendor pr

问题:

I've looked at Blueprint, Less, and SCSS and none of them appear to do what I want. I find this difficult to believe because handling vendor prefixes is the most frustrating part of writing CSS, so it would appear to be to be the first problem anyone who writes a CSS framework ought to address.

I want to know, is there a framework (or rails gem) that I can use, that allows me to write border-radius:5px and then let's me assume that it will create a rule with all the proper vendor prefixes?

Thanks

回答1:

You can actually do this quite easily with a LESS Mixin - basically you write it once and from there on out you apply it with one line. Like this:

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

Then you symply do this one-liner where you need a border radius:

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

If you are not ready for LESS, then you could just process your code through Prefixr - it generates the browser prefixes for you (then you have to copy paste the code back into your file).

回答2:

you can use that: http://sjevsejev.blogspot.com/2012/07/lessjs-function-generates-prefixes-for.html

then it would be enough to use:

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

回答3:

Perhaps a recently published collection of scss to css vendor prefix repository might be of interest, following is pulled from the border-radius.scss file...

@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,
  );
}

Using the above @mixin could look like...

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

... and for completeness, the above complies to...

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