Eine Geschichte von CSS und Sass Precision

Herausforderungen des prozentualen Layouts: Browserunterschiede und schwebende Punkte Präzisionsprobleme

Das prozentuale Layout

ist aufgrund der Inkonsistenz des Browsers und der mangelnden Spezifikation der schwimmenden Punktpräzision äußerst schwierig, was zu Ausrichtung und Präzisionsproblemen führen kann.

Vorteile von SASS: Verbesserung der Genauigkeit und der Code -Lesbarkeit

SASS ist eine Präprozessor -Skriptsprache, die die Präzision durch die Behandlung komplexer Berechnungen verbessert und Stylesheets leichter zu lesen und zu aktualisieren kann. Die Standard -Präzisionsoption von Sass beträgt jedoch 5, was für einige Fälle möglicherweise immer noch zu niedrig ist.

calc() Funktion: Browserberechnung und Rundung

calc(..) CSS -Funktionen ermöglichen es Browsern, Berechnungen und Runden zu verarbeiten, wodurch möglicherweise bessere Ergebnisse erzielt werden. Diese Funktion, kombiniert mit dem SASS -Betrieb, bietet das Beste aus beiden Welten für die CSS -Präzision.

Bei Edenspiekermann verlassen wir uns auf die Code -Überprüfung, um sicherzustellen, dass die von uns eingereichten Arbeiten gut genug sind. Eine Sache, die mir oft begegnet, ist die Mehrdeutigkeit in Bezug auf Zahlen (insbesondere Zahlen mit Dezimalpunkten). Dies ist also ein kurzer Artikel, der dieses Thema klären soll.

Anfangseinstellungen

Um die ganze Erklärung vor Beginn klarer zu machen, werden wir an einem kleinen Code arbeiten, was für unseren Fall sehr relevant ist.

<code>.list-item {
  float: left;
  width: 33%;
}</code>

Was ist das Problem?

Sie fragen sich vielleicht, was mit diesem Code los ist. Aus dem Aussehen gibt es kein großes Problem. Dies ist ein dreispaliges Netzlayout, das weit verbreitet ist.

entsprechen jedoch 33% 33% 99%, nicht 100%. Während dies in den meisten Fällen keinen Unterschied macht, können 1% bei der Ausrichtung der geraden Linie einen großen Einfluss haben. 1% eines Behälters, der 14 Pixel breit ist, beträgt 14 Pixel. Dies ist eine beträchtliche Entfernung.

Warum können wir nicht einfach den Dezimalpunkt verschieben (oder hinzufügen), um ihn genauer zu machen? Wir könnten die Lücke auf 1,4 Pixel oder sogar 0,14 Pixel reduzieren, was meiner Meinung nach die Mühe nicht mehr wert ist! Dann fangen Sie hier an.

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

Es funktioniert besser, aber immer noch nicht perfekt. John Albin Wilkins diskutiert dieses Thema in diesem Artikel mit dem Titel „The Dirty Little Secret of Responsive Design“ ausführlich. Wenn Sie es noch nicht gelesen haben, lesen Sie es.

Kann der Browser dies nicht umgehen?

Zu diesem Zeitpunkt fragen Sie sich vielleicht, warum der Browser es nicht zum Laufen bringen kann. Das Problem ist, dass die CSS -Spezifikation (ironischerweise) den Browser -Anbietern nicht angibt, was mit schwimmender Punktpräzision für prozentuale Zahlen zu tun ist. Wenn die CSS -Spezifikation Details auslässt, können Sie sicher sein, dass jeder Browser sie auf seine eigene Weise behandelt.

Die folgenden Beispiele aus dem obigen Artikel:

[…] Verwenden Sie ein 6-Spal-Netz mit 100% Breite pro Säule ÷ 6 = 16,666667%. In einem Ansichtsfenster, das 1000 Pixel breit ist (ich habe es bequem ausgewählt, um unsere Mathematik zu vereinfachen), wird jede Spalte auf 166,66667 Pixel berechnet. Da die Spezifikation keine Richtlinien enthält, können Browserhersteller ihre eigenen Regeln formulieren. Wenn der Browser zum nächsten Pixel rundet, erhalten wir in unserem Beispiel 167 Pixel. Seit 167 x 6 = 1002 Pixel haben wir nicht mehr Platz für alle 6 Spalten in unserem Ansichtsfenster. Oder wenn der Browser auf 166 Pixel pro Säule rundet, werden wir 4 Pixel weniger als perfekt alle Spalten in unser Ansichtsfenster einbringen. —— John Albin Wilkins

Das ist passiert. Ältere Versionen von Internet Explorer (hauptsächlich 6 und 7) rundeten sich auf die nächste Ganzzahl und verursachen Layoutunterbrechungen. Webkit Browser rundet sich ab, was katastrophale Layoutergebnisse verhindert, uns aber zusätzlichen Platz lässt. Opera (zumindest in ihrem alten Rendering -Motor) tut etwas Seltsames, das zu faul bin, um es zu erklären. Es gibt jedoch keine Regeln für dieses Verhalten in der Spezifikation. Wen sollte ich beschuldigen? Natürlich nicht die Browser, die das Subpixel -Rendering verwenden, da dies letztendlich der Weg ist, um die besten Ergebnisse zu erzielen.

Wie auch immer, dies ist einfach ein Chaos und wir werden dieses Thema im Abschluss dieses Artikels erneut diskutieren.

Wie wäre es mit Sass?

SASS unterstützt mathematische Operationen. Dies ist nichts Neues, es ist tatsächlich eines von mehreren Dingen, die Sass ursprünglich verwendet haben (zum Aufbau eines mathematischen Netzsystems). Wir können Sass erkennen, dass wir die Breite des Behälters in 3 gleiche Teile unterteilen wollen.

<code>.list-item {
  float: left;
  width: 33%;
}</code>

Wir können auch die prozentuale (..) Funktion verwenden, um dasselbe Ergebnis zu erzielen:

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

In Ruby and Libsass beträgt die Genauigkeitsoption für SASS 5. Dies ist tatsächlich ein Problem, weil es sehr niedrig ist.

Dieser Code generiert das folgende CSS:

<code>.list-item {
  float: left;
  width: (100% / 3);
}</code>

Dies löst unser Browserproblem nicht, erleichtert jedoch Schreibstylesheets. Wir müssen uns nicht nur nicht mit den Berechnungen und der Präzision befassen, sondern auch den Code leichter zu lesen und zu aktualisieren, indem wir die Berechnungen tatsächlich anzeigen.

Ich denke, das ist eine gute Sache.

Das Beste aus beiden Welten

Bisher haben wir gelernt, dass es besser ist, SASS die Berechnungen für uns verarbeiten zu lassen, anstatt die Werte zu harten. Der beste Weg ist der beste Weg, den Browser so gut wie möglich zu erledigen. Zu diesem Zweck kann die calc(..) CSS -Funktion verwendet werden.

<code>.list-item {
  float: left;
  width: percentage(1 / 3);
}</code>

Dieser Code wird in nichts kompilieren. Es erscheint im Browser, wie die Autoren schreiben. Der Browser ist dann dafür verantwortlich, das Beste daraus zu machen. Ich werde Ihnen ganz ehrlich sagen, dass ich nicht sicher bin, ob der Browser den Wert calc(..) wie bei regulären Werten umgeht. Ich denke, sie machen die Berechnungen und dann rund. Einige Browser scheinen das Subpixel -Rendering in die Gleichung einzubeziehen. Wenn Sie irgendwelche Einblicke dazu haben, teilen Sie es bitte in den Kommentaren mit.

Für Browser, die calc(..) Ausdrücke (hauptsächlich Internet Explorer 8 und Opera Mini) nicht unterstützen, können wir einen statischen Wert vornehmen, der als SASS -Operation dargestellt wird. Auf diese Weise können wir das Beste aus beiden Welten haben.

<code>.list-item {
  float: left;
  width: 33%;
}</code>

Schlussfolgerung

Lassen Sie uns schnell überprüfen. Erstens ist das prozentuale Layout aufgrund der Inkonsistenz des Browsers und der mangelnden Spezifikationen für die Präzision des schwebenden Punktes schwer zu bewältigen.

Dann sind Hardcode-Werte, die durch eine komplexe Berechnung erzeugt werden, normalerweise keine gute Idee. Wir können SASS eine Näherung berechnen (5 Dezimalstellen).

Besser noch, wir können den Browser eine Annäherung berechnen lassen. In einer idealen Welt sollte der Browser in der Lage sein, das Beste daraus zu machen. Um sich in diese Richtung zu bewegen, verlassen wir uns auf die calc(..) -Funktion.

Dies ist fast die aktuelle Situation. Nichts Neues, aber ich denke, eine kurze Bewertung wird helfen!

FAQs über CSS und Sassgenauigkeit (FAQ)

Was ist der Unterschied zwischen CSS und Sass?

CSS (Cascading Style Sheet) ist eine Stylesheet -Sprache, mit der das Aussehen und die Formatierung von in HTML geschriebenen Dokumenten beschrieben werden. SASS (Smart Stylesheets in Syntax) ist eine Präprozessor -Skriptsprache, die in CSS interpretiert oder kompiliert wird. Der Hauptunterschied zwischen beiden besteht darin, dass SASS Merkmale aufweist, die in CSS nicht vorhanden sind, wie Variablen, Nist, Mischung, Vererbung usw. Diese Funktionen machen Sass leistungsfähiger und flexibler als CSS.

Wie funktioniert Präzision in CSS und Sass?

Die Präzision in CSS und SASS bezieht sich auf das Detail und die Genauigkeit des Stilrenders. In CSS ist Präzision aufgrund des Mangels an Variablen und Funktionen häufig begrenzt. Sass hingegen ermöglicht dank seiner fortschrittlichen Funktionen eine höhere Genauigkeit. Sie können beispielsweise Variablen für eine bestimmte Farbe oder Größe definieren und sie im gesamten Stylesheet konsistent verwenden, um die Genauigkeit und Konsistenz in Ihrem Design sicherzustellen.

Kann ich SASS in einem Webprojekt verwenden?

Ja, Sie können SASS in jedem Webprojekt verwenden. SASS ist mit allen Versionen von CSS kompatibel. So können Sie mit CSS beginnen und die SASS -Funktion bei Bedarf hinzufügen. Denken Sie jedoch daran, dass SASS ein Präprozessor benötigt, um es in ein CSS umzuwandeln, den der Browser interpretieren kann.

Was sind die Vorteile der Verwendung von SASS gegenüber CSS?

SASS bietet mehrere Vorteile gegenüber CSS. Es ermöglicht die Verwendung von Variablen, Verschachteln, Mischung und Erbe, wodurch Ihr Stylesheet organisierter, wiederverwendbarer und leicht zu warten ist. SASS unterstützt auch mathematische Operationen und ermöglicht es Ihnen, Abmessungen und Farben direkt im Stilblatt zu berechnen.

Wie verbessert man die Genauigkeit von CSS oder SASS -Code?

Sie können die Genauigkeit Ihres CSS- oder SASS -Codes verbessern, indem Sie Variablen verwenden, um konsistente Werte zu erhalten, mathematische Operationen zur Durchführung präziser Berechnungen zu verwenden und Funktionen und Mischungen zu verwenden, um wiederverwendbare Stile zu erhalten. Darüber hinaus kann die Verwendung von CSS -Reset dazu beitragen, die Konsistenz zwischen verschiedenen Browsern sicherzustellen.

Was ist ein CSS -Präprozessor und warum braucht Sass ihn?

CSS -Präprozessor ist eine Skriptsprache, die die Standardfunktionalität von CSS erweitert. Sie können Variablen, verschachtelte Regeln, Mixins, Funktionen und Mathematikoperationen in Stylesheets verwenden. SASS ist ein CSS -Präprozessor. Es ist notwendig, weil der Browser nur CSS interpretieren kann. Daher muss der SASS -Code in CSS zusammengestellt werden, bevor er in einem Webprojekt verwendet wird.

Wie hilft SASS beim Schreiben trockener Code (nicht wiederholen Sie sich)?

SASS unterstützt Funktionen wie Variablen, Mixin und Vererbung, mit denen Trockencode geschrieben wird. Mit einer Variablen können Sie einen Wert gleichzeitig definieren und an mehreren Stellen verwenden. Mit Mixin können Sie wiederverwendbare Stile schreiben, die in andere Regeln enthalten sein können. Mit der Vererbung können Sie eine Reihe von CSS -Eigenschaften von einem Selektor zum anderen teilen.

Was sind die möglichen Fallstricke bei der Verwendung von SASS?

Während Sass viele Vorteile bietet, hat es auch potenzielle Fallstricke. Der Bedarf an Präprozessoren kann die Komplexität des Entwicklungsprozesses erhöhen. Darüber hinaus können einige SASS -Funktionen wie Nesting und Mixin dazu führen, dass CSS -Ausgangsleistung und Ineffizienz bei unsachgemäßer Anwendung aufblähen und ineffizienz sind.

Wie kann man mit dem Lernen und mit Sass beginnen?

Es stehen viele Ressourcen zur Verfügung, um Sass online zu lernen. Die offizielle SASS -Website bietet einen umfassenden Leitfaden für den Einstieg. Sie können auch Tutorials auf Websites für Webentwicklung und Online -Lernplattformen finden. Um mit SASS zu beginnen, müssen Sie in Ihrer Entwicklungsumgebung einen Sass -Präprozessor einrichten.

Kann ich meinen vorhandenen CSS -Code in SASS konvertieren?

Ja, Sie können Ihren vorhandenen CSS -Code in SASS konvertieren. Da SASS ein Superset von CSS ist, ist alle gültigen CSS gültig. Sie können zuerst Ihre .css -Datei in .scss (Sassy CSS) umbenennen und dann allmählich die SASS -Funktion in Ihrem Code verwenden.

Das obige ist der detaillierte Inhalt vonEine Geschichte von CSS und Sass Precision. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!