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
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 -
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.
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? -
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 -
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
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
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: 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.
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...
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