Give help. Get help.

  • # 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!

    # 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:

    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.

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

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

You must be logged in to reply to this topic.