A set of useful mixins for LESS CSS

thegingman wrote: post #4

irfn wrote: post #3

are there any popular mixins for sass?

Check out http://compass-style.org/reference/compass/ . It has everything the two others have + some more.

Unfortunately many of the compass mixins require extensions to SASS to work. This makes them difficult to use without using all of compass.

Re: A set of useful mixins for LESS CSS

#7

Post by fadeyev » Fri, Sep 02, 2011, 4:26 PM UTC

aditya42 wrote: post #2

Eh. What was wrong with Preboot[1]? [1]: http://markdotto.com/bootstrap/

Hey aditya42,

I'm the creator of LESS Elements. Nothing is wrong with Bootstrap, it's just that when I wrote these mixins a while back Bootstrap wasn't yet available.

Re: A set of useful mixins for LESS CSS

#8

Post by paulirish » Fri, Sep 02, 2011, 6:26 PM UTC

fadeyev, your first example is a little misleading. Only Safari 3-4 required the border-radius syntax to be declared individually. So really this is how it goes:

     /* these two lines for saf 3-4 support */
       -webkit-border-top-left-radius: 5px; 
      -webkit-border-top-right-radius: 5px;

    /* all you need for Saf5, Chrome, Op, FF1+, IE9 */
     -moz-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;

That said, I like the project. Just clarifying this. :)

EDIT: given the spec'd shorthand syntax, your shorthand for unique corners seems to conflict `(5px, 0, 0, 5px)`. I'd suggest changing that.

Re: A set of useful mixins for LESS CSS

#9

Post by d0m » Fri, Sep 02, 2011, 7:42 PM UTC

Suggestion to improve the article: Give a visual example of each mixin. Otherwise, thanks for the article!

Re: A set of useful mixins for LESS CSS

#10

Post by fadeyev » Fri, Sep 02, 2011, 11:43 PM UTC

paulirish wrote: post #8

fadeyev, your first example is a little misleading. Only Safari 3-4 required the border-radius syntax to be declared individually. So really this is how it goes: /* these two lines for saf 3-4 support */ -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; /* all you need for Saf5, Chrome, Op, FF1+, IE9 */ -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; That said, I like the project…

Thanks for pointing this out, you're right that the example is now outdated, though it's probably not too difficult to find more browser specific code to pick on :) I'll change that.