CSS: convertire i pixel in unità rem o em in SASS

In SASS per convertire i pixel in unità rem ed em dobbiamo implementare delle funzioni.

Le funzioni sono le seguenti:


@function rem-calc($size, $font-size : $font-size) {
    $font-size: $font-size + 0px;
    $remSize: $size / $font-size;
    @return #{$remSize}rem;
}

@function em-calc($size, $font-size : $font-size) {
    $font-size: $font-size + 0px;
    $remSize: $size / $font-size;
    @return #{$remSize}em;
}

Esempio d'uso:


@import 'functions';

$font-size: 14;

body {
  font-size: #{$font-size}px;
  font-size: rem-calc(14px); // 1rem
}
Torna su