Verwendung einer PostCSS-Funktion zur Automatisierung Ihres Responsive Workflows

Vor einiger Zeit sind Sie vielleicht auf diesen CSS-Tricks-Artikel gestoßen, in dem ich beschrieben habe, wie ein Mixin zur Automatisierung responsiver Schriftgrößen mit RFS verwendet werden kann. In seiner neuesten Version, v9, kann RFS jeden Wert für jede CSS-Eigenschaft mit px- oder rem-Einheiten skalieren, wie z. B. margin, padding, border-radius oder sogar box-shadow.

Heute konzentrieren wir uns auf seine PostCSS-Implementierung.Als Erstes installieren Sie RFS mit npm

npm install rfs

Der nächste Schritt ist, RFS zur PostCSS-Plugin-Liste hinzuzufügen. Wenn Sie eine postcss.config.js-Datei verwenden, können Sie es zur Liste anderer PostCSS-Plugins (z. B. Autoprefixer) hinzufügen.

module.exports = {
  plugins: [
    require('rfs'),
    require('autoprefixer'),
  ]
}

Nach der Konfiguration können Sie die Funktion rfs() überall in Ihrem benutzerdefinierten CSS verwenden. Wenn Sie beispielsweise möchten, dass Ihre Schriftgrößen responsiv sind

.title {
  font-size: rfs(4rem);
}

…oder verwenden Sie es mit einer beliebigen Eigenschaft, die Sie möchten

.card {
  background-color: #fff;
  border-radius: rfs(4rem);
  box-shadow: rfs(0 0 2rem rgba(0, 0, 0, .25));
  margin: rfs(2rem);
  max-width: 540px;
  padding: rfs(3rem);
}

Der obige Code erzeugt das folgende CSS

.card {
  background-color: #fff;
  border-radius: calc(1.525rem + 3.3vw);
  box-shadow: 0 0 calc(1.325rem + 0.9vw) rgba(0, 0, 0, .25);
  margin: calc(1.325rem + 0.9vw);
  max-width: 540px;
  padding: calc(1.425rem + 2.1vw);
}

@media (min-width: 1200px) {
  .card {
    border-radius: 4rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, .25);
    margin: 2rem;
    padding: 3rem;
  }
}

Demo

Hier ist ein Pen, der zeigt, wie die Dinge funktionieren. Sie können die Demo vergrößern und verkleinern, um die fließende Neuskalierung in Aktion zu sehen.

Siehe den Pen
RFS card- PostCSS von Martijn Cuppens (@MartijnCuppens)
auf CodePen.

Ein tieferer Einblick, wie RFS das CSS parst

Das Plugin sucht nach jedem Vorkommen der Funktion rfs() in den Deklarationswerten und ersetzt die Funktion durch einen fließenden Wert mithilfe der Funktion calc(). Nach jeder Regel generiert RFS eine Media Query mit zusätzlichem CSS, das verhindert, dass die Werte zu groß werden.

RFS konvertiert nur px- und rem-Werte in einer Deklaration; alle anderen Werte (z. B. em-Werte, Zahlen oder Farben) werden ignoriert. Die Funktion kann auch mehrmals in einer Deklaration verwendet werden, wie hier

box-shadow: 0 rfs(2rem) rfs(1.5rem) rgba(0, 0, 255, .6)

RFS und benutzerdefinierte Eigenschaften

:root {
  --title-font-size: rfs(2.125rem);
  --card-padding: rfs(3rem);
  --card-margin: rfs(2rem);
  --card-border-radius: rfs(4rem);
  --card-box-shadow: rfs(0 0 2rem rgba(0, 0, 0, .25));
}

Diese Variablen können Sie später in Ihrem CSS verwenden.

.card {
  max-width: 540px;
  padding: var(--card-padding);
  margin: var(--card-margin);
  background-color: #fff;
  box-shadow: var(--card-box-shadow);
  border-radius: var(--card-border-radius);
}

---

Ich hoffe, Sie finden diese Updates nützlich für Ihre Arbeit. Hinterlassen Sie einen Kommentar, wenn Sie Fragen oder Feedback haben!