.font-size(@size) {
font-size: (@size * 1px);
font-size: ((@size / 10) * 1rem);
}
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.
Sets the font-size in both px
and rem
units
(based on the root <html>
element being set to the equivalent of 10px
).
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.
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);
}
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.
.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;
}
This centers an element horizontally using auto margins.
An optional width
parameter can be specified.
main {
.centered(62ch);
}
.centered() {
margin-right: auto;
margin-left: auto;
}
.centered(@width) {
.centered();
max-width: @width;
}