Help me convert these CSS3 transitions to LESS?

[divinehammer]

In my boilerplate HTML/CSS I use for projects, I usually include this piece of code for nice hovers –

a:hover, :focus, li:hover {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

What is the most compact way to combine all these things in LESS syntax?

My current way seems cumbersome. I’ve set variables here –

@transition-speed: 0.3s;
@transition-property: all;
@transition-timing: linear;

And further down, I have this –

a:hover, :focus, li:hover {
-webkit-transition: @transition-property @transition-speed linear;
-moz-transition: @transition-property @transition-speed linear;
-o-transition: @transition-property @transition-speed linear;
transition: @transition-property @transition-speed linear;
}

Thanks for any advice for a LESS newb!

http://codepen.io/anon/pen/IGkJo

[divinehammer]

Man I am dumb. Thanks Chris, that does make sense. For some reason I was thinking there was even one more step to abstracting out all this stuff into something simpler, still, but maybe not –

a:hover, :focus, li:hover {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
transition: @transition;
}

Pesky browser prefixes!

[Zoom]

You should probably use a mixin to do this. Also you should probably apply the transition on the a, li etc, and not on the :hover, so the transition will be smooth when you hover over and out of the element. Example: http://codepen.io/TheoL/pen/AeKhw

There are mixin libraries that already have a lot of these mixins for you, such as clearless http://clearleft.github.com/clearless/ , but unfortunately it seems that no less mixin library is as good as compass for sass.

[divinehammer]

Oh cool, I didn’t realize you could do it like that either – thanks!

Currently checking out ClearLESS as well as lesselements.com for reference…

[divinehammer]

One more question —

I’d like to create a global rounded-corner style for a bunch of different selectors. Here’s what I have so far, but there’s probably a smarter way, than comma-separating all those selectors? –

http://codepen.io/anon/pen/DoKFs

[Author]

Posts