4

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

4

3 Answers 3

5

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

1

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);
1
  • That link looks like your own blog. You might want to mention it in the answer if it is.
    – Flexo
    Jul 21, 2012 at 18:36
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.