Mixins

¶

Mixins

A set of mixins I seem to use on all projects. They’re all created as “functions” so they need to be called from the importing Less file to generate any output. Which also means that merely importing this file without using any of the mixins, won’t add anything to your final CSS.

font-size

Sets the font-size in both px and rem units (based on the root <html> element being set to the equivalent of 10px).

Example:

body {
  .font-size(22);
}

which will output:

body {
  font-size: 22px;
  font-size: 2.2rem;
}

.font-size(@size) {
	font-size: (@size * 1px);
	font-size: ((@size / 10) * 1rem);
}

This overload also sets the line-height to a unitless value that equals the pixel value specified.

Example:

body {
  .font-size(20, 32);
}

which will output:

body {
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.6;
}

.font-size(@size, @line_height) {
	.font-size(@size);
	line-height: (@line_height / @size);
}

visuallyHidden

I’ve had various versions of this one, to hide an element while keeping it accessible to screen readers end similar assistive technologies. The current version is from this Gist by Andy Bell.

Example

.sr-only {
    .visuallyHidden();
}

.visuallyHidden() {
	border: 0;
	clip: rect(0 0 0 0);
	height: auto;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

centered

This centers an element horizontally using auto margins. An optional width parameter can be specified.

Example

main {
    .centered(62ch);
}

.centered() {
	margin-right: auto;
	margin-left: auto;
}

.centered(@width) {
	.centered();
	max-width: @width;
}