Grow your CSS skills. Land your dream job.

Help me convert these CSS3 transitions to LESS?

  • # January 17, 2013 at 12:07 pm

    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

    # January 17, 2013 at 12:16 pm

    I use Compass/SASS, never forayed into LESS, so there may be an easier approach, but is this what you’re looking for? http://codepen.io/ChrisPlz/pen/mGyxs

    # January 17, 2013 at 12:26 pm

    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!

    # January 17, 2013 at 12:57 pm

    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.

    # January 17, 2013 at 1:34 pm

    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…

    # January 17, 2013 at 3:18 pm

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".