Wie wird die vertikale Versatz-Rhythm-Ausgabe von Rems anstelle von Ems mit px Fallback erstellt?

Question

Ich möchte dies tun: http://www.youtube.com/watch?v=ls3Clk-kz3s aber Ausgabe rems (mit px Fallback) anstelle von ems.

Anscheinend https://github.com/chriseppstein/compass/pull/896 hinzugefügt Kompass und sollte irgendwie funktionieren, aber ich verstehe nicht ganz, was ich von http://compass-style.org/reference/compass/typography/vertical_rhythm/ meiner .scss -Dateien müssen es machen.

Wenn ich nehmen Sie nur den Code aus https://gist.github.com/ry5n/2026666 als mixin (auch ohne Kompass überhaupt) und Verwendung:

@include set-font-size() 

statt:

@include adjust-font-size-to() 

Es funktioniert wunderbar mit rem Werte und px Fallback.

Aber wenn ich nur versuchen, Kompass zu nutzen und gehen mit

$font-unit: 1rem; 
$relative-font-sizing: false; 

Es funktioniert, aber ohne px Rückfall.

Wenn jemand den kompletten .scss-Code, der für Vertical Rhythm benötigt wird, um mit Rems arbeiten zu können, würde ich es sehr schätzen.

Und warum brauche ich $ relative-font-sizing: false, wenn ich Rems verwende? Gibt es auch andere konkurrierende Philosophien über den vertikalen Rhythmus als den Text auf ein solches Raster zu bringen? Welche bevorzugen Sie und was ist Ihr Workflow?

Vielen Dank im Voraus.

Answer 1

Für den Moment bleiben diese Updates zu Compass in der Vorabversion und die entsprechende Dokumentation ist noch nicht auf compass-style.org verfügbar (nicht einmal auf beta.compass-style.org). Um die neuen Funktionen zu verwenden, installieren Sie das neueste Juwel (0.13.alpha.4):

gem install compass --pre 

Mit dem neuen Juwel, der vertikale Rhythmus API ist etwas anders, vor allem in seinen konfigurierbaren Variablen, wie pro https://github.com/chriseppstein/compass/pull/896. Kurz gesagt, stellen Sie Ihre Basisschriftgröße und Zeilenhöhe, und stellen Sie den neuen $ Rhythmus-Einheit Variable rem:

$base-font-size: 16px; 
$base-line-height: 24px; 
$rhythm-unit: 'rem'; 

Die $ Rhythmus-Unit-Variable ersetzt $ font-Einheit und $ Relativ font-Sizing ist jetzt eine private, interne Sache, um die Sie sich keine Sorgen machen müssen.

Danach werden alle normalen vertikalen Rhythmus Mixins ausgibt rem mit Fallbacks (es sei denn, Sie explizit $ rem-mit-Pixel-Rückfall auf false gesetzt). Beachten Sie, dass der Rest der API fast identisch bleibt, mit Ausnahme der rhythm Mixin, die jetzt mehr vernünftige Standardargumente hat. Es gibt ein paar Ergänzungen, die in der original pull request detailliert aufgeführt sind.

Eine Sache zu beachten, dass die Rhythmusfunktionen keine Pixelrückschläge liefern können, da sie einfach einen Wert zurückgeben.