0

Is it possible to use a wildcard as a property value in CSS3?

I'm using LESS if that helps.

For example assuming class name is animation-delay-8

[class^=animation-delay-] {
    -webkit-animation-delay: // the value should be 8
}
Cjmarkham
  • 9,484
  • 5
  • 48
  • 81
  • 1
    It's not possible. You'll need to use JavaScript or hard-code a bunch of these values. – Blender Dec 24 '13 at 10:26
  • 1
    LESS still spits out CSS in the end, so it doesn't make any difference. You're still going to have a ton of `.animation-delay-1 { -webkit-animation-delay: 1; }`s in your resulting CSS file. LESS can help you make it simpler to write, as you can just loop from 1 to 20. – Blender Dec 24 '13 at 10:30
  • ok, thanks. Should add your comment as an answer so I can accept it – Cjmarkham Dec 24 '13 at 10:31

1 Answers1

1

It's not possible. You'll need to use JavaScript, which will be either slow or not properly handle every element with that class, or use some preprocessor to nicely output the repetitive CSS.

LESS doesn't have a clean way to write loops (unless you like recursion), so I'd use SCSS:

@for $i from 1 through 10 {
    .animation-delay-#{$i} {
        -webkit-animation-delay: #{$i};
    }
}
Community
  • 1
  • 1
Blender
  • 289,723
  • 53
  • 439
  • 496