LESS Font Mixins

LESS Font Mixins

// http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/ &
// https://gist.github.com/Victa/1209370
.rem-calc(@sizeValue) {
	@remValue: 	@sizeValue/10;
	@pxValue: 	@sizeValue;
	font-size: 	~"@{pxValue}px"; 
	font-size: 	~"@{remValue}rem";
}


// font families *Taken from variables.less
@headline: 	"Tungsten A", "Tungsten B", "Helvetica Neue Condensed Bold", Helvetica, Arial, sans-serif;
@sans-serif: 	"Gotham A", "Gotham B", "Avenir", Helvetica, Arial, sans-serif;
@serif: 	"Sentinel SSm A", "Sentinel SSm B", Palatino, "Bookman Old Style", "Times New Roman", serif;


// font weights *Taken from variables.less
@light: 	300;
@book: 		400;
@semibold: 	600;
@bold: 		700;


// typography base *Taken from variables.less
@font-size-base: 	16px;
@line-height-base:	1.428571429; // 20/14


// mixin shorthand
.shorthand ( @size: @font-size-base, @weight: @book, @lineHeight: @line-height-base ) {
	.rem-calc(@size);
	font-weight: @weight;
	line-height: @lineHeight;
}


// mixin specific font
.sans-serif ( @size: @font-size-base, @weight: @book, @lineHeight: 1.4 ) {
	.shorthand(@size, @weight, @lineHeight);
	font-family: @sans-serif;
}


// How to use
// Note: parameters are not required, however setting a parameter after another
// the previous parameters are then required
p {
	// Give it just the font-size
	.sans-serif(16);
}

p strong {
	// Give it the font-size and weight
	.sans-serif(16, @bold);
}


// Output
p {
	// Give it just the font-size
	// .sans-serif(16);
	font-size: 16px; // this is a fallback in case rems don't work
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.4;
	font-family: "Gotham A", "Gotham B", "Avenir", Helvetica, Arial, sans-serif;
}


// Valid
.sans-serif();
.sans-serif(10);
.sans-serif(10, @bold);
.sans-serif(10, @bold, 1.4);

// Not Valid
.sans-serif(@bold);