Grouping css at-rules

Question

Is it possible to remove copy-paste for at-rules specified in code below ?

animated {
    animation: expand .7s;
    -moz-animation: expand .7s;
    -webkit-animation: expand .7s;
    -o-animation: expand .7s;
}
@keyframes expand {
    from {height: 502px;}
    to {height: 558px;}
}
@-moz-keyframes expand {
    from {height: 502px;}
    to {height: 558px;}
}
@-webkit-keyframes expand {
    from {height: 502px;}
    to {height: 558px;}
}

I want to have single place with definition of keyframes ("from .. to .. " code)

BoltClock · Accepted Answer · 2013-11-05 09:44:21Z

3

No, you cannot group at-rules.

That's the disadvantage of prefixed rules: you have to repeat values for every prefix as appropriate.

You could go with a preprocessor like Sass or LESS that offers mixin functionality, write a mixin that generates all the prefixed rules, and use that mixin throughout your stylesheet and it'll handle compiling the appropriate CSS at-rules for you. But you can't group prefixed at-rules using CSS without repeating the values.

edited Nov 5, 2013 at 9:44

answered Nov 5, 2013 at 9:33

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Sperske Over a year ago

once you start writing LESS (or SCSS) and start compiling your final CSS you will never go back (it makes the language so much cleaner)

Collectives™ on Stack Overflow

Grouping css at-rules

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related