Specifically looking at things with a -webkit, -moz -o prefix such as transform, transition, etc...开发者_JAVA技巧

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

---

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;

---

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/

---

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