LESS DSS (dynamic stylesheet)

A set of useful mixins for LESS, the CSS pre-processor: lesscss.org
I recommend 'CodeKit' app for auto compress (not only for less) ;) (OS X)
List of all functions is on: mrkrupski.github.com/LESS-Dynamic-Stylesheet/

Examples how to use functions contained in the less.dss file:

CSS Backgrounds

---

• .gradient-h - CSS3 - Horizontal background gradient.
.gradient-h(#fff, #aaa);
• .gradient-hline - CSS3 - Horizontal-linear background gradient.
.gradient-hline(#fff, #ddd, #aaa, #ddd);
• gradient-v - CSS3 - Vertical background gradient.
.gradient-v(#fff, #aaa);
• .gradient-v3colors - CSS3 - Three-color background gradient.
.gradient-v3colors(#00b3ee, #7a43b6, 50%, #c3325f);
• .gradient-radial - CSS3 - Radial background gradient.
.gradient-radial(#fff, #aaa);
• .gradient-direction - CSS3 - Directional background gradient (type only the value - extension is added automatically).
.gradient-direction(#fff, #aaa, 120);
• .background-clip - Crop the backgroud of an element (border-box | padding-box | content-box) - value must be without "-box"!.
.background-clip(border-box);
• .background-size - Control the size of background images via CSS3.
.background-size(100%, 50%);


CSS3 Borders

---

• .box-shadow - CSS3 - The box-shadow property attaches one or more drop-shadows to the box (always add " before and after values - thanks to that you can use many shadows at the same time).
.box-shadow("0 0 5px blue");
.box-shadow("0 0 5px blue, inset 2px 2px 10px rgba(0,0,0, .2), 0 1px 4px #000");
• .border-image - CSS3 - Define an image to be used instead of the normal border of an element.
.border-image(url(picture.img));
.border-image(url(picture.img), 100%, 1, 0, stretch);
• .rounded - CSS3 - Round the corners of an element. Can be a single value or four space-separated values.
.rounded(10px);
• .box-sizing - Change the box model for an element (e.g., border-box for a full-width input).
.box-sizing(border-box);
• .tab-size - CSS3 - The tab-size CSS property is used to customize the width of a tab character.
.tab-size(8);


CSS3 2D Transforms

---

• .translate - CSS3 - With the translate() method, the element moves from its current position (X-axis - left, Y-axis - top).
.translate(20, 40);
• .rotate - CSS3 - With the rotate() method, the element rotates clockwise at a given degree (type only the value - extension is added automatically).
.rotate(3);
• .scale - CSS3 - With the scale() method, the element increases or decreases the size.
.scale(.8);
• .skew - CSS3 - With the skew() method, the element turns in a given angle (X-axis - horizontal, Y-axis - vertical) (type only the value - extension is added automatically).
.skew(30, 4);
• .matrix - CSS3 - The matrix() method combines all of the 2D transform methods into one.
.matrix(0.9, 0.2, -0.5, 0.9, 0, 0);


CSS3 3D Transforms

---

• .rotateX - CSS3 - With the rotateX() method, the element rotates around its X-axis at a given degree (type only the value - extension is added automatically).
.rotateX(180);
• .rotateY - CSS3 - With the rotateY() method, the element rotates around its Y-axis at a given degree (type only the value - extension is added automatically).
.rotateY(40);
• .translate3d - CSS3 - Is the same that the 'translate' option but we have at our disposal 3 values (X-axis, Y-axis, Z-axis).
.translate3d(8, 5, 4);
• .perspective - CSS3 - Defines a perspective view for a 3D transformed element.
.perspective(140, px);


CSS3 2D & 3D Transforms

---

(they are acting only in steam with other functions from "2D & 3D Transforms" group)

• .transform-origin - The transform-origin property allows you to change the position on transformed elements.
.transform-origin(50%, 50%, 0);
• .transform-style - CSS3 - The transform-style property specifies how nested elements are rendered in 3D space.
.transform-style(preserve-3d);


CSS3 Transitions

---

• .transition - CSS3 - Add an effect when changing from one style to another.
.transition(width, .7s);


CSS3 Animations

---

• .animate - CSS3 - Create animations (checkout: http://daneden.me/animate/ - pack of done animations).
.animate(wobble);
.animate(fadeIn, 0, ease, 2s, 1, normal, running);


CSS3 Multiple Columns

---

• .columns - CSS3 - Create multiple columns for laying out text (like in newspapers).
.columns(auto 2, normal, medium none black);


CSS Misc

---

• .clearfix - Add to any parent to clear floats within (value = none).
.clearfix;
• .font - Font-size, line-height and weight.
.font(28, 34, bold);
• .size - Quickly set the height and width on one line (you can enter only the values) (type only the value - extension is added automatically).
.size(200, 100);
• .square - Use this if height and width have the same values (type only the value, or with the custom extension).
.square(400);
• .opacity - Elements transparency (full = 1 not 100).
.opacity(.5);
• .less-button - Quickly create a customize button (background-color, border-color, text color, text-shadow, font-weight, padding, rounded corners).
.less-button(#ccc, #999, #444, 0 1px 0 rgba(255,255,255,0.40), normal, 6px 18px, 4px);