Patterns: LessCSS Mixins & Functions

bkg-gradient.less.css

// Simple background gradient; 2-colors
.background-gradient (@start-color: #BE5B63, @end-color: #7F1C24) {
	// Generated via http://j.mp/ROBdww (CSSGradientButton.com)
	background-color: @start-color;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start-color), color-stop(100%, @end-color));
	background-image: -webkit-linear-gradient(top, @start-color, @end-color);
	background-image: -moz-linear-gradient(top, @start-color, @end-color);
	background-image: -ms-linear-gradient(top, @start-color, @end-color);
	background-image: -o-linear-gradient(top, @start-color, @end-color);
	background-image: linear-gradient(top, @start-color, @end-color);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=@start-color, endColorstr=@end-color);
}
// Glossy-look, background gradient; 4-colors
.background-gradient-glossy (@start-color: #ffffff, @tophalf-color: #f1f2f3, @subhalf-color: #dfe0e2, @end-color: #e9eaec) {
	background: @start-color; /* Old browsers */
	background: -moz-linear-gradient(top,  @start-color 0%, @tophalf-color 50%, @subhalf-color 51%, @end-color 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start-color), color-stop(50%,@tophalf-color), color-stop(51%,@subhalf-color), color-stop(100%,@end-color)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  @start-color 0%,@tophalf-color 50%,@subhalf-color 51%,@end-color 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  @start-color 0%,@tophalf-color 50%,@subhalf-color 51%,@end-color 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  @start-color 0%,@tophalf-color 50%,@subhalf-color 51%,@end-color 100%); /* IE10+ */
	background: linear-gradient(to bottom,  @start-color 0%,@tophalf-color 50%,@subhalf-color 51%,@end-color 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@start-color', endColorstr='@end-color',GradientType=0 ); /* IE6-9 */
}
.background-none {
	background: none;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); /* IE6-9 */
}

box-shadows.less.css

// Examples of how to use .box-shadow mixin
//.box-shadow (1px 1px 3px 0, 35%, 0, 0, 0);
//.box-shadow (1px 1px 3px 0, #000);
//.box-shadow (inset 1px 1px 3px 0, #000);
.box-shadow (@style, @color) when (iscolor(@color)) {
	-webkit-box-shadow: @arguments;
	   -moz-box-shadow: @arguments;
	        box-shadow: @arguments;
}
.box-shadow (@style, @alpha: 50%, @R: 0, @G: 0, @B: 0) when (isnumber(@alpha)) {
	.box-shadow (@style, rgba(@R, @G, @B, @alpha));
}

functions.less.css

.same-height (@height: 10px) {
	height: @height;
	line-height: @height;
}

// Apply .inline-block-list to UL/OL classname
.inline-block-list (@a-display: block) {
	list-style: none;
	margin: 0;
	li {
		.zero-box;
		display: inline-block;
		list-style: none;
	}
	a { display: @a-display; }
}

.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	   -moz-border-radius: @radius;
	        border-radius: @radius;
}

mixins.less.css

.zero-box {
	margin: 0;
	padding: 0;
}
.unselectable-text {
/* Make text unselectable */
cursor: default;
-webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
// Kellum Method, text-image replacement
// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
.hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.bkg-sprite {
	background-image: url('@{image-URI}/sprites.png');
	background-position: 0 0;
	background-repeat: no-repeat;
}

.hide {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
.remove {
	display: none;
}

Updated the Gist w/ Less/CSS+CSS3 patterns I've been using lately.

Added .box-shadow mixin.

Added .hide & .remove mixins. Differentiated between different behaviors. Referenced via http://coding.smashingmagazine.com/2012/11/19/building-relationship-between-css-javascript/

Added .background-none mixin taking care of filter property for IE if gradients are used for the background.