The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help me convert these CSS3 transitions to LESS?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #42058

    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!


    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!


    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:

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


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

    Currently checking out ClearLESS as well as for reference…


    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? –

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.