Mixins для размера шрифта Rem онлайн урок.


Блокremfont-size похож наem, только вместо каскадирования он всегда относится к элементу root (html) ( больше информации ). У этого есть довольно хорошая современная поддержка браузера, это только IE 8, и мы должны предоставитьpxfallbacks for.

Вместо того, чтобы повторять себя повсюду, мы можем использовать миксы LESS или SASS, чтобы они были чистыми. Эти миксины предполагают:

html {
font-size: 62.5%; /* Sets up the Base 10 stuff */
}

.font-size(@sizeValue) {
@remValue: @sizeValue;
@pxValue: (@sizeValue * 10);
font-size: ~"@{pxValue}px";
font-size: ~"@
{remValue}rem";
}

@mixin font-size($sizeValue: 1.6) {
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
}

# Применение

p {
.font-size(13);
}

p {
@include font-size(13);
}

(Спасибо Gabe Luethje )


Еще один SCSS с другим подходом Карла Меркли:

@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}

@mixin rem-fallback($property, $values...) {
$max: length($values);
$pxValues: '';
$remValues: '';

@for $i from 1 through $max {
$value: strip-unit(nth($values, $i));
$pxValues: #
{$pxValues + $value*16}px;

@if $i < $max {
$pxValues: #{$pxValues + " "};
}
}

@for $i from 1 through $max {
$value: strip-unit(nth($values, $i));
$remValues: #
{$remValues + $value}rem;

@if $i < $max {
$remValues: #{$remValues + " "};
}
}

#{$property}: $pxValues;
#
{$property}: $remValues;
}

Таким образом, вы можете:

@include rem-fallback(margin, 10, 20, 30, 40);

и получить:

body {
margin: 160px 320px 480px 640px;
margin: 10rem 20rem 30rem 40rem;
}