Use existing CSS3 mixins module

[Zearin]

Couple of things regarding the CSS3 mixins:

• I'm not convinced they belong in /core. I think they should be an “addon” that is imported by default.
• There are so many existing CSS3 mixins that it makes me dizzy trying to keep track of which ones belong to which framework. I recommend setting a good example for the community by reusing existing CSS mixins. If they do not meet the needs of Flaw{LESS}, then either
  • …import existing mixins and then fill any gaps in functionality, or
  • …fork existing mixins, improve, and submit improvements to the owner. That way, the entire community can start getting “on the same page” with CSS3 mixins instead of having to learn new mixins every time they use a different framework. This also promotes the already-proclaimed belief in modular code. :)

There is an existing project of CSS3 mixins on github. I have personally been using these mixins for several weeks with pleasant results.

Note: The author prefers Compass+SASS, but I think his LESS mixins are nevertheless an excellent bit of standalone code, easily dropped into any LESS project with no fuss. I also have a fork where I'm starting to tweak the code, just in case the author abandons the project because he prefers for SASS. (And I promise I won't let my fork die! :-)

[superstructor]

Hi Tony,

Apologies for the delay in getting back to you.

+1 for re-using some of those mixins. There are a few that flawless doesn't have.

The main thing I'm not sure about with the mixins from the repos you mentioned is that maybe greater use of the fact that variables can be lists of values is worth considering e.g.

.box-shadow(@shadow) which can be used with .box-shadow(1px 1px 1px #fff)

instead of

.box-shadow(@shadow-x: 0, @shadow-y: 0, @shadow-rad: 10px, @shadow-color: #CCC)

I do like that the mixin names are shorter than the current css3_box_shadow style naming in flawless. Also using hypen instead of underscore is good. It is closer to the w3c spec, shorter and easier to type.

We could rename mixins and maintain backwards compatibility for awhile by aliasing them e.g.

.css3_box_shadow(@shadow) {
  .box-shadow(@shadow);
}

Cheers
Isaac

[Zearin]

Are you saying you prefer .box-shadow(@shadow) over breaking up all the individual values?

If so, I’m totally with you on that. I suppose the “separate arguments” version is nice in that it describes the syntax for the values…but then again, it’s more likely that anyone using this stuff is probably familiar with most of the syntax values. Heh. ☺

As for any nitpicks with how the other code is structured, I have been granted full access since opening this issue; the original dev prefers SASS+Compass and doesn’t really touch that repo any more. So I’m happy to make improvements to the code as we go!

[superstructor]

Yep I prefer the .box-shadow(@shadow) rather than breaking everything up for some cases. Sometimes it makes sense to have multiple arguments for a mixin, its really just a case by case basis.

Thanks for working on this! Its a good idea.