Mixins cho Rem Font Sizing - Thủ thuật CSS

Anonim

Các remđơn vị font-size cũng tương tự như em, chỉ thay vì tầng nó luôn luôn liên quan đến các phần tử gốc (html) (thông tin thêm). Điều này có hỗ trợ trình duyệt hiện đại khá tốt, chỉ là IE 8 trở xuống, chúng tôi cần cung cấp pxdự phòng.

Thay vì lặp lại bản thân ở mọi nơi, chúng ta có thể sử dụng kết hợp LESS hoặc SASS để giữ cho nó sạch sẽ. Các mixin này giả định:

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; )

Sử dụng

p ( .font-size(13); )
p ( @include font-size(13); )

(Cảm ơn Gabe Luethje)

Một SCSS khác với cách tiếp cận khác của Karl Merkli:

@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; )

Vì vậy, bạn có thể làm:

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

và lấy:

body ( margin: 160px 320px 480px 640px; margin: 10rem 20rem 30rem 40rem; )