Bootstrap 2.2.2 is out (opens in new tab)

I think it might be a result of trying to be "better CSS" instead of "a language for generating CSS".

Say you wanted to delay a slide-in-right animation for 50ms per list item. (So item 1 slides in immediately, item 2 50ms later, item 3 50ms later, etc.)

For that portion, this is what the LESS looks like:

  -animation-delay(@delay) { animation-delay: @delay; ...vendor prefixes... }
  .delay-child-animations {
    &:nth-child(2n){ .animation-delay: 50ms;  }
    &:nth-child(3n){ .animation-delay: 100ms;  }
    &:nth-child(4n){ .animation-delay: 150ms;  }
    ... more things here ...
  }

  @mixin delay-child-animations($max-children: 20) {
    @for $i from 1 to $max-children {
      &:nth-child(#{$i}n){ .animation-delay: ($i - 1)*50ms;
    }
  }

http://stackoverflow.com/questions/8294400/css-animations-wi... http://radiatingstar.com/css-keyframes-animations-with-less

http://css-tricks.com/sass-vs-less/

Sass also allows you to put media queries inside your rule blocks. (In the future, this will be also possible in regular CSS.)

http://www.quora.com/Bootstrap-front-end-framework/Why-did-T...

You can also use http://retinajs.com/ to scale stuff up if you want.