Less Snippets

by Thomas Gladdines

CSS

/*
Less css

use less.js or http://less2css.org/
*/

/*
Prevents margins to collapse

.parent {
	.no-collapse;
}
.child {
	margin-top: 100px;
}
*/
.no-collapse() {
	&:before,
	&:after {
		content: "";
		display: table;
	}
}

/*
Clearfix

.container {
	.clearfix;
}
*/
.clearfix() {
	.no-collapse;
	&:after {
		clear: both;
	}
}

/*
Prevents the background to leak under the border

div {
	background: red;
	border: 10px solid rgba(0, 0, 255, .5);
	.no-background-leak;
}
*/
.no-background-leak() {
	background-clip: padding-box;
}

/*
Vertically stretch child to fill parent height

//sticky footer
.container {
	.stretch-child(~':nth-last-child(2)');
}
//Stretch last child to bottom of parent
.container {
	.stretch-child(~':last-child');
}
*/
.stretch-child(@child) {
	display: flex;
  	& > @{child} {
		flex: 1;
	}
}
/*
Same as above but only works on the last-child,
it works in browsers that don't support flexbox though.

.container {
	.stretch-last-child;
}
*/
.stretch-last-child() {
	overflow: hidden;
	& > :last-child {
		padding-bottom: 9999px;
		margin-bottom: -9999px;
	}
}

/*
Vertical center child

.popup-wrapper {
	.vertical-center(~'.popup', absolute);
}
*/
.vertical-center(@child, @position: relative) {
	transform-style: preserve-3d;
	@{child} {
		position: @position;
		top: 50%;
		transform: translateY(-50%);
	}
}