//
// Fonts - REM fallback for old browsers and line-height
// --------------------------------------------------
// Font size
.font-size(@size: 14) {
font-size: unit(@size, px);
font-size: unit((@size * 0.10), rem);
}
// Line height
.line-height(@size: 20) {
line-height: unit(@size, px);
line-height: unit((@size * 0.10), rem);
}
// Font sets
.font(@font-size: 14; @font-weight: normal) {
.font-size(@font-size);
font-weight: @font-weight;
& when(@font-size =< 30) {
.line-height(@font-size * 1.75);
}
& when(@font-size > 30) {
.line-height(@font-size * 1.15);
}
}
html {
font-size: 62.5%;
}
font
, font-weight
and line-height
// LESS
h1 {
.font(40, 700);
}
// CSS
h1 {
font-size:40px;
font-size:4rem;
font-weight:700;
line-height:46px;
line-height:4.6rem;
}
font
only
// LESS
h1 {
.font-size(40);
}
// CSS
h1 {
font-size:40px;
font-size:4rem;
font-weight:700;
line-height:46px;
line-height:4.6rem;
}