LESS DSS (dynamic stylesheet)

It's a set of useful mixins for LESS, the CSS pre-processor: lesscss.org.
I recommend a "CodeKit" app for the auto compress (OS X).
Licensed under the MIT License

Examples how to use the functions contained in "less.dss" (v1.8.1) file:

Backgrounds Group

---

• .gradient-h
.gradient-h ( #fff, #aaa );
• gradient-v
.gradient-v ( #fff, #aaa );
• .gradient-vline
.gradient-vline ( #fff, #ddd, #aaa, #ddd );
• .gradient-v3colors
.gradient-v3colors ( #00b3ee, #7a43b6, 50%, #c3325f );
• .gradient-radial
.gradient-radial ( #fff, #aaa );
• .gradient-direction
.gradient-direction ( #fff, #aaa, 120 );
• .bg-clip
.bg-clip ( border-box );
.bg-clip ( border );
• .bg-size
.bg-size ( 100%, 50% );


Box Group

---

• .box-align
.box-align ( baseline );
• .box-direction
.box-direction ( normal );
• .box-orient
.box-orient ( horizontal );
• .box-pack
.box-pack ( center );
• .box-sizing
.box-sizing ( content-box );
• .box-shadow
.box-shadow ( "0 0 5px blue, inset 2px 2px 10px rgba (0,0,0, .2), 0 1px 4px #000" ); (multi)
.box-shadow ( in, 0 1px 4px #ddd ); (inset)
.box-shadow ( out, 0 1px 4px rgba(0,0,0, .5) ); (outset)
.box-shadow ( 0 1px 4px, #ccc, 45% ); (alpha)


Border Group

---

• .border-image
.border-image ( "../img/picture.img", 30 30 repeat );
• .rounded
.rounded ( 10px );
.rounded ( 3px 2px 4px 10px );
.rounded ( top, 5 );
.rounded ( right, 5 );
.rounded ( bottom, 5 );
.rounded ( left, 5 );


Transform Group

---

• .transform
.transform ( perspective(0) translate3d(50px, 40px, 80px) scale3d(1, 2, 0) rotate3d(0, 1, 0, 45deg) );
• .matrix
.matrix ( 0.9, 0.2, -0.5, 0.9, 0, 0 );
• .matrix3d
.matrix3d ( "1, 0, 0, 0, 0, 0.60, 0, -0.0009, 0, 0, 1, 0, 0, 0, 0, 1" );
• .rotate
.rotate ( 45 );
.rotate ( x, 45 );
.rotate ( y, 45 );
.rotate ( z, 45 );
• .rotate3d
.rotate ( 15, 10, 5, 45 );
• .scale
.scale ( 0.8 );
.scale ( x, 0.4 );
.scale ( y, 1.3 );
.scale ( z, .7 );
• .scale3d
.scale3d ( .4, .5, 1.2 );
• .translate
.translate ( 20, 40 );
.translate ( x, 20 );
.translate ( y, 40 );
.translate ( z, 60 );
• .translate3d
.translate3d ( 20, 40, 60 );
• .skew
.skew ( 30, 4 );
.skew ( x, 20 );
.skew ( y, -30 );
• .perspective
.perspective ( 250 );
.perspective ( 250, px );
• .perspective-origin
.perspective-origin ( 50% 50% );
• .transform-origin
.transform-origin ( 30%, 40%, 0 );
• .transform-style
.transform-style ( preserve-3d );


Transition

---

• .transition
.transition ( width, .7s );
.transition ( property, 0.2s, ease-out, 0 );


Animation Group

(checkout: http://daneden.me/animate/)

---

• .animate
.animate ( wobble );
.animate ( wobble, 2s, ease, 0, 1, normal );
• .animation-state
.animation-state ( running );


Column

---

• .columns
.columns ( 2, normal );


Misc Group

---

• .opacity
.opacity ( 0.7 );
• .font
.font ( italic, normal, bold, 14px, 1, "'Lucida Grande', Helvetica, Arial, Verdana, sans-serif" );
• .font-face
.font-face ( MyFontName, "../assets/fonts/sofia-pro" );
• .size
.size ( 400, 200 );
• .square
.square ( 400 );
• .resizable
.resizable ( vertical );
• .hide-text
.hide-text;
• .center-block
.center-block;
• .clearfix
.clearfix;