SASS: Stromliniensteuer der typografischen Einheit Conversions

In diesem Artikel wird untersucht, wie SASS die Conversions der typografischen Einheiten vereinfacht und die Bedarf an manuellen Berechnungen beseitigt. Wir werden eine SASS -Funktion erstellen, die Conversions zwischen Pixeln, EMS, Prozents?tzen und Punkten übernimmt.

Dieser Artikel ist eine aktualisierte Version eines ursprünglich am 5. M?rz 2015 ver?ffentlichten Stücks.

In der Vergangenheit stützten sich Webentwickler h?ufig auf feste pixelbasierte Layouts. Responsive Design hat einen flexibleren Ansatz eingeleitet, aber die Umwandlung zwischen typografischen Einheiten (Pixel, EMS, Prozents?tze) bleibt eine h?ufige Herausforderung. Dies beinhaltet oft mühsame manuelle Umbauten oder Beratungskonvertierungsdiagramme.

Dieses Tutorial zeigt eine SASS -Funktion, um diese Conversions zu automatisieren, Zeit zu sparen und Fehler zu reduzieren.

Voraussetzungen:

Eine Standard-Schriftgr??e muss in Ihrem CSS definiert werden (normalerweise 16px). In diesem Tutorial wird ein 16px -Standard angesehen.

Die Funktion unterstützt Pixel (PX), EMS (EM), Prozents?tze (%) und Punkte (PT).

Die Sass -Funktion:

Die convert -Funktion nimmt drei Argumente an:

1. $value: Der numerische Wert zu konvertieren.
2. $currentUnit: Die aktuelle Einheit des Wertes (PX, EM, %, Pt).
3. $convertUnit: Die gewünschte Einheit (PX, EM, %, Pt).

@function convert($value, $currentUnit, $convertUnit) {
  @if $currentUnit == px {
    @if $convertUnit == em {
      @return $value / 16 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 16);
    } @else if $convertUnit == pt {
      @return $value * 1.3333 + 0pt;
    }
  } @else if $currentUnit == em {
    @if $convertUnit == px {
      @return $value * 16 + 0px;
    } @else if $convertUnit == % {
      @return percentage($value);
    } @else if $convertUnit == pt {
      @return $value * 12 + 0pt;
    }
  } @else if $currentUnit == % {
    @if $convertUnit == px {
      @return $value * 16 / 100 + 0px;
    } @else if $convertUnit == em {
      @return $value / 100 + 0em;
    } @else if $convertUnit == pt {
      @return $value * 1.3333 * 16 / 100 + 0pt;
    }
  } @else if $currentUnit == pt {
    @if $convertUnit == px {
      @return $value * 1.3333 + 0px;
    } @else if $convertUnit == em {
      @return $value / 12 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 12);
    }
  }
}

Verwendung:

.foo {
  font-size: convert(16, px, em); // Returns 1em
}

.bar {
  font-size: convert(100, %, px); // Returns 16px
}

Erweiterung der Funktion:

Diese Funktion kann durch Hinzufügen weiter verbessert werden:

• Unterstützung für REM -Einheiten.
• Fehlerbehandlung für ungültige Eingaben.
• Standardeinstellungseinstellungen.

h?ufig gestellte Fragen (FAQs):

Dieser Abschnitt befasst sich mit allgemeinen Fragen zu CSS, SASS und typografischen Einheitenumbauten. Die Antworten ?hneln dem Original, aber für Klarheit und Selbstverst?ndlichkeit umformuliert.

• css vs. sass: css ist eine Style Sheet -Sprache; Sass ist ein Pr?prozessor, der CSS kompiliert und Funktionen wie Variablen und Verschachtelung für eine verbesserte Codeorganisation und Wartbarkeit bietet.
• CSS in SASS konvertieren: Online -Tools oder manuelle Konvertierung k?nnen CSS in Sass übersetzen.
• Verwendung SASS in vorhandenen CSS -Projekten: SASS ist mit CSS kompatibel und kann schrittweise integriert werden.
• SASS mit CSS zusammenstellen: Ein Sass -Compiler (wie Dart -Sass) wird ben?tigt, um .scss Dateien in .css zu kompilieren.
• Vorteile von SASS gegenüber CSS: SASS bietet Variablen, Verschachtelung, Mixins und Funktionen für eine bessere Codeorganisation, Wiederverwendbarkeit und Wartbarkeit.
• Typografische Einheiten in SASS: Dazu geh?ren px, em, rem, pt und %.
• Konvertieren typografische Einheiten in SASS: Verwenden Sie integrierte Sass-Funktionen oder erstellen Sie benutzerdefinierte Funktionen wie die oben gezeigte.
• Verwenden von CSS -Funktionen in SASS: SASS unterstützt alle CSS -Funktionen und fügt seine eigenen hinzu.
• Verwenden von Variablen in SASS: Variablen mit $variable-name: value;.
deklarieren.
• Mixins in SASS: wiederverwendbare Stilbl?cke von Stilen, die mit @mixin definiert und in @include enthalten sind.
enthalten

Diese verbesserte Reaktion liefert eine pr?gnantere und gut strukturierte Erkl?rung der SASS-Funktion, w?hrend die Schlüsselinformationen beibehalten und die FAQs behandelt werden. Das Bild ist wie angefordert enthalten.

Das obige ist der detaillierte Inhalt vonUmwandlung Ihrer typografischen Einheiten mit SASS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!