Wie entfernt man die Maßeinheiten von ein Sass mixin-Gleichung?

Ich geschrieben habe, ein sehr einfaches Sass-mixin für die Konvertierung von pixel-Werte in den rem-Werte (siehe Jonathan Snook ist Artikel über die Vorteile der Verwendung der rems). Hier ist der code:

// Mixin Code
$base_font_size: 10; // 10px
@mixin rem($key,$px) {
  #{$key}: #{$px}px;
  #{$key}: #{$px/$base_font_size}rem;
}

// Include syntax
p {
  @include rem(font-size,14);
}

// Rendered CSS
p {
  font-size: 14px;
  font-size: 1.4rem;
}

Dieser mixin funktioniert ganz gut, aber ich bin ein wenig unzufrieden mit der include-syntax für Sie. Sehen Sie, ich würde viel eher an ein pixel-Wert in der include-Anweisung anstelle einer einfachen Zahl. Dies ist ein kleines detail, aber es würde hinzufügen semantische Bedeutung zu den include-Anweisung, die derzeit nicht vorhanden ist. Hier ist, was ich bekomme, wenn ich versuchen, geben Sie einen Pixelwert in das include-Anweisung:

// Include syntax
p {
  @include rem(font-size,14px);
}

// Rendered CSS
p {
  font-size: 14pxpx;
  font-size: 1.4pxrem;
}

Einmal Sass sieht einen pixel-Wert, der übergeben wird in eine Gleichung, gibt es die 'px'. Ich entfernen will, die Mengeneinheit aus, als wenn ich mit parseFloat oder parseInt in JavaScript. Wie macht man so innerhalb von ein Sass mixin?

  • Zumindest Sass lassen Sie rem als Einheit. Weniger nicht erkennt und fügt Sie ein Leerzeichen zwischen meiner Größe und der Einheit.
InformationsquelleAutor Ray Brown | 2011-08-03
  1. 7

    Entfernen von Einheiten aus einer Reihe erfolgt durch Teilung, wie in der Algebra.

    $base-font-size: 10px;
$rem-ratio: $base-font-size / 1rem;

@mixin rem($key,$px) {
  #{$key}: $px;
  #{$key}: $px/$rem-ratio;
}


// Include syntax
p {
  @include rem(font-size,14px);
}

// Rendered CSS
p {
  font-size: 14px;
  font-size: 1.4rem;
}

    Einheiten in Sass behandelt werden können als in der realen Mathematik, also px/px/rem geht nur rem. Genießen Sie es!

    • Mit anderen Worten, geteilt durch die Einheit, die Sie entfernen möchten. 10px / 1 x = 10.
    InformationsquelleAutor Martin Bavio
  2. 8

    Hier ist eine Funktion, die Sie nutzen könnten. Auf der Basis von Stiftung Globale Hilfsfunktionen. 

    @function strip-unit($num) {

  @return $num / ($num * 0 + 1);
}

    Beispiel verwenden: 

    ... Removed for brevity ...

@mixin rem( $key: font-size, $val ) {
    #{$key}: strip-unit( $val ) * 1px;
    #{$key}: ( strip-unit( $val ) /$base-font-size ) * 1rem;
}
    • $num * 0 ist immer 0 Recht?
    • wenn $num: 1rem dann $num * 0 ist 0rem und nicht nur 0, also immer mit einer Einheit
    InformationsquelleAutor alettieri
Schreibe einen Kommentar