Es gibt viel Verwirrung darüber, wie Einheiten in Sass funktionieren. Doch sie funktionieren genau wie im echten Leben. Wenn Sie die Einheit eines Wertes entfernen wollen, müssen Sie ihn durch 1 Einheit teilen. Zum Beispiel, um die cm Einheit von 42cm zu entfernen, müssen Sie sie durch 1cm teilen. In Sass funktioniert es genau gleich.
$length: 42px;
$value: $length / 1px;
// -> 42Aber was ist, wenn Sie die verwendete Einheit nicht kennen? Nehmen wir an, es könnte alles sein, von Pixeln über em bis hin zu vw und ch. Dann müssen wir die Logik in einer Funktion abstrahieren.
/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}Die Berechnung mag seltsam aussehen, aber sie ist tatsächlich sinnvoll. Um 1 der Einheit von $number zu erhalten, können wir $number mit 0 multiplizieren und dann 1 addieren.
Verwendung
$length: 42px;
$value: strip-unit($length);
// -> 42
Wofür genau können wir diese Funktion verwenden? Mir fällt nichts Spezifisches ein, da Sass bisher zumindest Operationen mit gleichen Einheiten berechnet. Es ist offensichtlich, dass Operationen mit nicht gleichen Einheiten möglich sind. Aber wenn Sie möchten, geben Sie uns bitte ein Beispiel!
Zustimmung, Anwendungsfälle sind ziemlich ungewöhnlich. Einer, der mir von Reda Lemeden (Bourbon, Neat, …) vorgeschlagen wurde.
Meistens ist es möglich, das Problem zu umgehen, indem man Einheiten richtig manipuliert.
Berechnungen der zeilenhöhe ohne einheit sind ein spezifisches Beispiel, wenn Sie eine Variable mit einer einheit haben...
Ich entwickle derzeit ein proprietäres Framework für unser Unternehmen und bin auf ein großes Hindernis gestoßen, als ich mich mit 'rem'-Einheiten beschäftigte. Wie Sie unter http://caniuse.com/#feat=rem sehen können, unterstützt Internet Explorer (selbst bis Version 11) in einer Reihe von Fällen keine rem-Einheiten, und nach Experimenten bin ich zu dem Schluss gekommen, dass es in der Praxis viel schlimmer ist, als sie es aussehen lassen. Ich habe tatsächliche Schriftgrößen, die verrückt spielen, und deaktivierte Abstände/Paddings usw., um nur einige zu nennen.
Die Lösung auf dieser Seite ermöglichte es mir, ein Sass-Mixin zu erstellen, das meine rem-Einheiten narrensicher macht. Alles, was ich tun musste, war, am Anfang eine tatsächliche $unit-Variable zu erhalten, mit der ich das Ergebnis multiplizieren kann.
http://codepen.io/anon/pen/vNJMLY
Wie Sie sehen können, werden beide Werte in der Reihenfolge des am wenigsten wünschenswerten an den Browser übermittelt. Ich denke, der Artikel des OP hilft tatsächlich bei der Bewältigung dieser Probleme mit der Abwärtskompatibilität. Oder vielleicht bin ich das nur.
Der Nachteil in meinem speziellen Fall (aber dann denke ich, es ist dasselbe wie bei jedem Polyfill) ist, dass er den Zweck von rem-Einheiten im Grunde zunichtemacht... Die einfachste Lösung ist letztendlich ein Mixin, um die Root-Einheit mit jedem Wert zu multiplizieren und damit die Funktion von rem vollständig zu ersetzen.
Ich hasse dich gerade so sehr, Internet Explorer, und deinen immer noch bedeutsamen Anteil am Browser-Markt.
1232
Ein Anwendungsfall ist, wenn Sie Ihre eigenen Funktionen schreiben möchten, die Berechnungen mit einem bereitgestellten Prozentsatz durchführen müssen. Sie können mit einer Prozentzahl nichts anfangen, daher müssen Sie den Prozentsatz entfernen. Sass behandelt ihn als "Einheit", die entfernt werden muss. Vergessen Sie nicht, den einheitenlosen Prozentwert durch 100 zu teilen, um einen echten Wert für die Berechnung zu erhalten.
Die Gegenfunktion ist percentage(), die bereits mit Sass geliefert wird. Sie haben nur die unpercentage()-Funktion vergessen.
Die strip unit Funktion funktioniert mit Sass 1.49.9 nicht mehr wegen der Breaking Change: Slash als Division
https://sass-lang.de/documentation/breaking-changes/slash-div
Hier ist die überarbeitete Version für Dart Sass
Das funktioniert tatsächlich nicht ganz so wie Einheiten in tatsächlicher Mathematik, da man die Addition von Werten mit unterschiedlichen Einheiten nicht vereinfachen kann.
Also für $number: 5px;
$number / ($number * 0 + 1)
5px / (5px * 0 + 1)
5px / (0px + 1)
undefined + 5px