7

Specifically looking at things with a -webkit, -moz -o prefix such as transform, transition, etc...

I'm wanting something like a smart sass (which I thought would probably do it, but doesn't appear to) that would take the generic form of commands and write all the long prefixed versions for me. For example:

    .shrink {
        -webkit-transition: -webkit-transform 1s;
        -webkit-transform: scale(0);
        -moz-transition: -moz-transform 1s;
        -moz-transform: scale(0);
        -o-transition: -o-transform 1s;
        -o-transform: scale(0);
    }

would be written as

    .shrink {
        transition: transform 1s;
        transform: scale(0);
    }

and the css "compiler" would write out all the other stuff.....

boatcoder
  • 17,525
  • 18
  • 114
  • 178

3 Answers3

4

2018 edit

I'd use https://github.com/postcss/autoprefixer with webpack to accomplish the sort of "css compiling" asked about in the original question

original 2011 answer

Here's one: http://www.techievideos.com/videos/1152/Save-time-writting-vendor-prefixes-using-CSS3-and-LESS/

Another option that would accomplish the goal:

It's a css3 converter that generates a background image that is served up to non-compliant/old browsers. Worth a look!

http://www.css3toimage.com/

Michael Jasper
  • 7,962
  • 4
  • 40
  • 60
4

Yes.

SCSS + Compass will get you what you want (as long as you don't mind Ruby / command line compilation.)

Here's an example from one of Compass' example pages:

SCSS:

    @include background-clip(padding-box);

    @include background-clip(border-box);

These expand to:

-moz-background-clip: padding;
-webkit-background-clip: padding;
-o-background-clip: padding-box;
-ms-background-clip: padding-box;
-khtml-background-clip: padding-box;
background-clip: padding-box;

/* And */

-moz-background-clip: border;
-webkit-background-clip: border;
-o-background-clip: border-box;
-ms-background-clip: border-box;
-khtml-background-clip: border-box;
background-clip: border-box;
Sean Vieira
  • 155,703
  • 32
  • 311
  • 293
  • 1
    Also if your on a asp.net environment: http://stackoverflow.com/questions/796788/using-sass-with-asp-net – mxmissile May 23 '11 at 17:12
-1

Here you find an amount of webkit css attributes. Most of them are similar to -o or -moz!

ChristianB
  • 1,967
  • 14
  • 25
  • right, most are "similar" I don't want to have to keep up with which ones, I want to say it once and have a tool deal with it..... – boatcoder May 23 '11 at 17:19