Präprozessor CSS: Überprüfung, Auswahl, Anwendung. Alternativen zur Textabschirmung

CSS-Präprozessor (CSS-Präprozessor)- Dies ist ein Add-In über CSS, das neue Funktionen und Funktionen für CSS mit zusätzlichen syntaktischen Strukturen bereitstellt.

Zweck der Präprozessoren.: Bereitstellung von komfortablen syntaktischen Designs für einen Web-Entwickler, um die Entwicklung und Unterstützung von Stilen in Projekten zu vereinfachen und zu beschleunigen.

CSS-Präprozessoren Erstellen Sie den Code, der mit Präprozessorsprache, sauber und gültig geschrieben wurde.

Mit Hilfe von Präprozessoren wird Ihr schriftlicher Code: lesbar für Menschen, strukturiert und logisch, produktiv.

Unter den beliebtesten Präprozessoren zuordnenWeniger, Sass (SCSS), Stylus. Außerdem, mehr oder weniger spürbare Instrumente in diesem Bereich sind Verschluß-Stylesheets, CSS-Crush, sie sind momentan weniger beliebt, aber alle genutztigen Entwicklern. Versuchen wir, die Möglichkeiten und Merkmale von weniger, Sass (SCSS), Stylus zu verstehen.

Die Standardnutzung von CSS ist ziemlich kompliziert. Die Syntax ohne Verschachtelung ist direkt für die visuelle Wahrnehmung kompliziert. Das Fehlen normaler Variablen und Funktionen macht den CSS-Code eng und mit vielen überflüssigen und nicht nötigen Details.

Verfügbare Dokumentation - Jetzt kann jeder den ausgewählten Präprozessor in kurzer Zeit in kurzer Zeit beherrschen, ohne überhöhte Kosten. Der zweite Vorteil ist die Einfachheit der Verwendung von Präprozessoren. Dazu müssen Sie nur ein spezielles Programm installieren, das den für den Vorverarbeitung vorgesehenen Dateien folgt, und wenn sie sich ändern, kompiliert sie den Inhalt dieser Dateien in einem sauberen CSS-Code.

Für fortgeschrittene Benutzer gibt es spezielle Projektsammler.

Weniger - der beliebteste und häufig verwendete Präprozessor. Enthält auf der Grundlage von JavaScript, beinhaltet die grundlegenden Möglichkeiten der Präprozessoren, bietet jedoch keine bedingten Strukturen und Zyklen im üblichen Verständnis. Aufgrund seiner Einfachheit und Faserung besteht eine Standardsyntax für CSS und die Möglichkeit, das Funktional aufgrund des Funktionierens von Plugins zu erweitern.

Weniger bietet CSS-Dynamikfunktionen: Variablen, Mischen (Mixine), Operationen und Funktionen. Die Dokumentation ist für den Entwickler sehr freundlich, und die Syntax ist dem reinen CSS sehr ähnlich. Beliebte Frameworks, wie Twitter-Bootstrap, verwenden aktiv dynamische weniger Funktionen. Es ermöglicht jedoch weniger, Klassen als Mischen von irgendwo in Stilblatt wiederzuverwenden.

Ein weiterer leistungsstarker und beliebtester Präprozessor - Sass.. Um dieses Instrument bildete sich eine riesige Gemeinschaft von Entwicklern. Es wurde 2007 als Modul für Haml gegründet und in Ruby geschrieben (bietet Port auf C ++). Es verfügt über eine Vielzahl von Funktionen, wenn sie mit weniger verglichen werden. Der Präprozessor erweitert seine Funktionalität aufgrund der Kompassbibliothek, wodurch es möglich ist, über den CSS-Rahmen hinauszugehen und weitgehend zu arbeiten. Bietet zwei Arten von Syntax: SASS (syntaktisch fantastische Stylesheets), einfacher CSS-Syntax, der auf dem Leerlauf basiert. Er gilt als veralteter Version. SCSS (SASSY CSS) basiert auf dem Standard für CSS-Syntax.

- Hübsche junge, aber bereits vielversprechender CSS-Präprozessor. 2010 angelegt. Viele betrachten es einen komfortablen und erweiterbaren Präprozessor und flexibler als SASS. Entwickelt für JavaScript. Es gibt Unterstützung für viele Syntaxoptionen von solchen CSS zu einfacher und einfach.

Nützliche Werkzeuge für Entwickler:

• Codekit.: Erläutert die Zusammenstellung von SASS-, WEGER- und Stylus-Dateien und überlasten Sie Ihren Webbrowser automatisch, nachdem Sie Dateien aktualisieren. Einschließlich Optimierung von Projektbildern, um die Systemleistung zu erhöhen. Die Technologie wird bezahlt, aber es gibt auch eine Testversion für die Arbeit.
• Liverload: Erlaubt das Überprüfen von Änderungen in Dateien, verarbeitet sie und starten den Webbrowser automatisch neu. Die Version funktioniert für Mac und Windows.
• Erkunden.: Funktioniert mit Sass und Kompass in der Rubin-Umgebung. Funktioniert für Mac und Windows.
• Simpleg: Normaler und einfacher CSS-Compiler für Mac und Windows.

Um einen Heilungsprozessor für seine Arbeit auszuwählen, versuchen Sie, mehrere zu verwenden. Und entsprechend den Ergebnissen des Tests sind Sie viel einfacher, um Ihre Wahl zu treffen. Und vergessen Sie nicht, dass Sie beim Mastering des Preprozessors keine neue Sprache lernen, sondern nur eine neue Syntax und eine neue Syntax und Funktionen erfahren. Unternehmen ™ Wünscht Ihnen eine angenehme Arbeit in der Welt CSS!

2545 mal. 1 heute einmal angesehen (a)

Absolut alle erfahrenen Vestovels verwenden Präprozessoren. Keine Ausnahmen. Wenn Sie in dieser Aktivität Erfolg haben möchten, vergessen Sie diese Programme nicht. Auf den ersten Blick können sie den Newcomer Ruhigen Horror anrufen - es ist bereits zu ähnlich der Programmierung! In der Tat können Sie sich mit allen Fähigkeiten der CSS-Präprozessoren um den Tag umgehen, und wenn Sie es versuchen, dann in ein paar Stunden. In der Zukunft werden sie das Leben erheblich vereinfachen.

Wie erschienen Preprozessoren CSS?

Um die Besonderheiten dieser Technologie besser zu verstehen, tauchen wir uns kurz in die Geschichte der Entwicklung der visuellen Präsentation von Webseiten ein.

Wenn nur der Massenverbrauch des Internets begann, gab es keine Stiltische. Das Dokumentendesign hing ausschließlich von Browsern ab. Jeder von ihnen hatte ihre eigenen Stile, die verwendet wurden, um bestimmte Tags zu verarbeiten. Dementsprechend sahen die Seiten unterschiedlich aus, je nachdem, welcher Browser Sie eröffnet haben. Das Ergebnis ist Chaos, Verwirrung, Probleme für Entwickler.

1994 entwickelte der norwegische Wissenschaftler Hokon Lee eine Stiltisch, mit der das Erscheinungsbild der Seite getrennt vom HTML-Dokument entworfen wurde. Die Idee mit Vertretern des W3C-Konsortiums, das sofort verfeinert wurde. Ein paar Jahre später wurde die erste Version der CSS-Spezifikation veröffentlicht. Sie wurde dann ständig verbessert, raffiniert ... aber das Konzept blieb trotzdem: Bestimmte Eigenschaften sind auf jeden Stil eingestellt.

Die Verwendung von CSS-Tischen verursachte immer bestimmte Probleme. Zum Beispiel hatten die Restigungsoren oft Schwierigkeiten, die Eigenschaften zu sortieren und zu gruppieren, und nicht alles ist so eindeutig.

Und jetzt kommen die zweitausendstel. Die Markierung merkt sich immer häufiger an professionellen Frontendentwicklern, für die flexible und dynamische Arbeit mit Stilen wichtig war. Die zu diesem Zeitpunkt vorhandene CSS forderten die Platzierung von Präfixen und Tracking-Support für neue Browserfunktionen. Dann nahmen JavaScript- und Ruby-Spezialisten die Arbeit auf, indem Sie Vorverarbeitungsvorgänge erstellen - Add-Ons für CSS, wodurch neue Möglichkeiten hinzugefügt werden.

CSS für Anfänger: Merkmale von Präprozessoren

Sie führen mehrere Funktionen aus:

• verbinden von Browserpräfixen und Khaki;

• syntax vereinfachen;

• ermöglichen es, mit verschachtelten Selektoren ohne Fehler zu arbeiten;

• verbessern Sie die Logik der Stilisierung.

Kurz gesagt: Der Präprozessor fügt CSS-Programmierlogik hinzu. Nun wird die Stilisierung nicht durch die übliche Stätte von Stilen und mit Hilfe von mehreren einfachen Techniken und Ansätzen durchgeführt: Variablen, Funktionen, Mischungen, Zyklen, Bedingungen. Darüber hinaus war es möglich, Mathematik zu verwenden.

Die Beliebtheit solcher Add-Ons sah, begann der W3C, die Funktionen von ihnen allmählich auf CSS-Code hinzuzufügen. Beispielsweise erschien die Calc () -Funktion in der Spezifikation, die von vielen Browsern unterstützt wird. Es wird erwartet, dass es bald möglich ist, Variablen einzustellen und Mixe zu erstellen. Dies wird jedoch in der fernen Zukunft passieren, und die Vorverarbeitung sind bereits hier und funktionieren bereits gut.

Beliebte CSS-Präprozessoren. Sass.

2007 entworfen. Es war ursprünglich eine Haml-Komponente - HTML-Vorlage. Die neuen CSS-Elemente-Management-Funktionen haben Entwickler in Rubin auf Rubin, die anfingen, es überall zu verteilen. SASS erschien eine Vielzahl von Funktionen, die jetzt in jedem Präprozessor enthalten sind: Variablen, Einbetten von Selektoren, Mixins (dann war es jedoch unmöglich, Argumente hinzuzufügen).

Sass-Variablen

Variablen werden mit dem $-Zeichen deklariert. Sie können Eigenschaften und ihre Kits sparen, zum Beispiel: "$ Borderolid: 1px festrot;". In diesem Beispiel haben wir eine Variable mit dem Namen BorderSolidet erklärt und 1px fest rot drin gespeichert. Wenn wir nun in CSS eine rote Grenzbreite in 1PX erstellen müssen, zeigt diese Variable einfach nach dem Eigenschaftsnamen an. Nach der Ankündigung können Variablen nicht geändert werden. Verfügbar mehrere eingebaute Funktionen. Zum Beispiel erklären wir die $ Redcolor-Variable mit dem Wert # FF5050. Im CSS-Code verwenden wir jetzt in den Eigenschaften eines Elements, um die Farbe der Schriftart anzugeben: P (Farbe: $ redcolor;). Möchten Sie mit der Farbe experimentieren? Verwenden Sie dunkle oder leichte Funktionen. Dies geschieht wie folgt: P (Farbe: Dark ($ Redcolor, 20%);). Infolgedessen wird die Farbe von Redcolor 20% leichter sein.

Nesting

Bisher war es notwendig, lange und unbequeme Designs zu verwenden, um das Nächten zu bezeichnen. Stellen Sie sich vor, wir haben eine div, in der p liegt, und dreht sich wiederum span. Für div müssen wir die rote Schriftfarbe für P-Gelb für Span-Pink einstellen. In der üblichen CSS würde es wie folgt durchgeführt werden:

Mit Hilfe eines CSS-Präprozessors ist alles einfacher und kompakter:

Elemente sind buchstäblich "investiert" in einem anderen.

Präprozessor-Richtlinien

Mit der @Import-Richtlinie können Sie Dateien importieren. Zum Beispiel haben wir eine fonts.sass-Datei, die Stile für Schriftarten deklariert. Wir verbinden es an den Haupt-Datei-Stil.Sass: @Import 'Schriftarten'. Bereit! Anstelle einer großen Datei mit Stilen haben wir einige, die für den schnellen und einfachen Zugriff auf die gewünschten Eigenschaften verwendet werden können.

Mixin

Eine der interessantesten Ideen. Es ermöglicht eine Zeile, einen ganzen Satz von Eigenschaften einzustellen. Arbeit wie folgt:

@mixin largefont (

schriftfamilie: 'mal neuer römischer';

schriftgröße: 64px;

linienhöhe: 80px;

schriftdicke: fett;

Um das Mischen auf das Element auf der Seite auf der Seite anzuwenden, verwenden Sie die @include-Richtlinie. Zum Beispiel möchten wir es an den H1-Header anwenden. Es erscheint das folgende Design: H1 (@include: Largefont;)

Alle Eigenschaften des Mischens werden dem H1-Element zugeordnet.

Präprozessor weniger.

SASS-Syntax erinnert an der Programmierung an. Wenn Sie nach einer Option suchen, die mit den CSS-Studien für Anfänger geeignet ist, achten Sie auf die weniger. Es wurde 2009 erstellt. Die Hauptmerkmale ist die Unterstützung von einheimischen, der mit der Programmierung an den Vestovels so nicht vertraut ist, dass es einfacher ist, es zu meistern.

Variablen werden mit dem @ -Symbol deklariert. Zum Beispiel: @Fontsize: 14px;. Die Verschachtelung arbeitet an denselben Prinzipien wie in Sass. Mixins werden wie folgt deklariert: .largefont () (font-face: 'mal neuer römischer'; Schriftgröße: 64px; Linienhöhe: 80px; Schriftart: Fett;). Um eine Verbindung herzustellen, müssen Sie keine Präprozessoren-Richtlinien verwenden - fügen Sie einfach ein frisch gerichtetes Mischen auf die Eigenschaften des ausgewählten Elements hinzu. Zum Beispiel: H1 (.Largefont;).

Stift.

Ein anderer Präprozessor. Erstellt im Jahr 2011 von demselben Autor, den ich Jade, Express und andere nützliche Produkte gab.

Variablen können auf zwei Arten deklariert werden - explizit oder implizit. Zum Beispiel: font \u003d 'mal neuer römischer'; - Dies ist eine implizite Option. Aber $ font \u003d 'mal New Roman' ist klar. Mixins werden implizit deklariert und verbunden. Syntax: redcolor () Farbe rot. Jetzt können wir es einem Artikel hinzufügen, zum Beispiel: H1 Redcolor ();.

Auf den ersten Blick mag Stylus unverständlich erscheinen. Wo "Verwandte" Klammern und Semikolons? Es steht jedoch nur darin, zu tauchen, wie alles viel klarer wird. Denken Sie jedoch daran, dass die langfristige Entwicklung mit diesem Präprozessor "lernen" kann, indem Sie die klassische CSS-Syntax verwenden. Dies verursacht manchmal Probleme, wenn nötig, um mit "sauberen" Stilen zusammenarbeiten.

Welcher Vorverarbeitung zur Auswahl?

In der Tat, es ... spielt keine Rolle. Alle Optionen bieten ungefähr die gleichen Funktionen, einfach die Syntax mit jeweils unterschiedlichen Syntax. Wir empfehlen, wie folgt zu fungieren:

• wenn Sie ein Programmierer sind und mit Stilen mit dem Code arbeiten möchten, verwenden Sie SASS;
• wenn Sie eine Projektion sind und mit Stilen wie ein reguläres Layout arbeiten möchten, achten Sie auf die weniger.
• wenn Sie Minimalismus mögen, verwenden Sie Stift.

Für alle Optionen stehen eine Vielzahl von interessanten Bibliotheken zur Verfügung, die die Entwicklung leicht vereinfachen können. SASS-Benutzer werden aufgefordert, auf den Kompass zu achten - einem leistungsstarken Werkzeug mit mehreren integrierten Funktionen. Nach der Installation müssen Sie beispielsweise nach der Installation von Anbieter-Präfixen sich keine Sorgen machen. Vereinfacht die Arbeit mit Gittern. Es gibt Dienstprogramme für die Arbeit mit Blumen, Sprites. Eine Reihe von bereits deklarierten Mixins ist verfügbar. Senden Sie dies ein paar Tage an das Medium - sparen Sie so viel Aufwand und Zeit in der Zukunft.

Moderne CSS - Macht und in Kombination mit Vorverarbeitern - im Allgemeinen Kampfmaschine für das Design von Inhalten auf den Seiten. Der Artikel enthält ein erweitertes Sass / SCSS-Handbuch mit Beispielen. Erfahren Sie nach dem Lesen, wie Sie Mixins, Variablen und Richtlinien für noch größere Stile verwenden.

HINWEIS Der gesamte SASS / SCSS-Code ist in CSS zusammengestellt, sodass Browser es verstehen und korrekt anzeigen können. Derzeit unterstützen Browser keine Arbeiten mit SASS / SCSs oder mit einem anderen CSS-Präprozessor direkt, die Standard-CSS-Spezifikation bietet keine ähnliche Funktionalität.

Warum verwenden Sie SASS / SCSS anstelle von CSS?

1. Nesting - Mit SCSS können Sie CSS-Regeln investieren. Die verschachtelten Regeln gelten nur für Elemente, die den externen Selektoren entsprechen (und wenn wir über SASS sprechen, ist alles schön und intuitiv verständlich ohne Klammern).
2. Variablen - Die Standard-CSS hat auch das Konzept der Variablen, aber in Sass können Sie etwas anders arbeiten. Wiederholen Sie zum Beispiel diese durch die @FOR-Richtlinie. Oder Eigenschaften dynamisch generieren. Weitere Details Sie können den russischsprachigen Ort des Projekts erkunden.
3. Verbesserte mathematische Operationen- Sie können CSS-Werte hinzufügen, abziehen, multiplizieren und aufteilen. Im Gegensatz zu den Standard-CSS können Sie Sass / SCS ohne Calc () darstellen.
4. Trigonometrie - Mit SCSS können Sie Ihre eigenen (sinusal- und cosesine) -Funktionen mithilfe von SASS / SCSS-Syntax schreiben, so wie Sie in anderen Sprachen wie JavaScript können.
5. Richtlinie @For, @wher. und Ausdruck @ if-else - Sie können CSS-Code mit bekannten Elementen aus anderen Sprachen schreiben. Teilen Sie jedoch nicht - dadurch wird der Ausgang die übliche CSS sein.
6. Mixins (Verunreinigungen) - Sie können einmal einen Satz von CSS-Eigenschaften erstellen und erneut mit anderen oder mit anderen Werten arbeiten. Mixins können verwendet werden, um ein einzelnes Layout zu erstellen. Die Verunreinigungen können auch ganze CSS-Regeln oder andere im SASS-Dokument enthalten. Sie können sogar Argumente annehmen, mit denen Sie eine Vielzahl von Stilen mit einer kleinen Menge Mischungen erstellen können.
7. Funktionen - Sie können CSS-Definitionen in Form von Funktionen zum wiederholten Gebrauch erstellen.

Präprozessor Sass.

SASS ist nicht dynamisch. Sie können CSS-Eigenschaften und Echtzeitwerte nicht generieren und / oder animieren. Sie können sie jedoch effizienter erstellen und Standardeigenschaften (z. B. Animation auf CSS) ermöglichen, um sie von dort aus zu leihen.

Syntax

SCSS fügt nicht besonders neue CSS-Funktionen hinzu, mit Ausnahme der neuen Syntax, die oft die Zeit zum Schreiben von Code schneidet.

Voraussetzungen

Es gibt 5 CSS-Präprozessoren: SASS, SCSS, Weniger, Stylus und Postcss.

Dieser Artikel ist größtenteils deckt SCSS ab, was SASS ähnelt. Sie können mehr über diese Präprozessoren lesen, um Überlauf oder Qaru zu stapeln (Übersetzung in Russisch).

Sass - (.sass) S.yntaktisch. EIN.wesome. S.tyle. S.erster.

SCSS - (.SCSS) Sass.y. C.ascading. S.tyle. S.erster.

Erweiterungen .sass i.scss sind ähnlich, aber immer noch nicht dasselbe. Für Befehlszeilen-Fans geben wir eine Konvertierungsmethode an:

Conversion von SASS in SCSS $ SASS-CONVERT STYLE.SASS STYLE.CSS # -Konvertierung von SCS in SASS $ SASS-CONVERT STYLE.SCSS STYLE.SASS

SASS ist die erste Spezifikation für SCSS mit der Erweiterung der Datei.Sass. Seine Entwicklung begann 2006, aber später wurde eine alternative Syntax mit Expansion entwickelt. CSSS.

beachten Sie Andere Präprozessoren mit Funktionalität sind ähnlich zu SCSS, aber die Syntax kann sich jedoch unterscheiden. Und auch alles, was in CSS funktioniert, wird auch in Sass und SCSS perfekt gespielt.

Variablen

Sass / SCS ermöglicht es Ihnen, mit Variablen zusammenzuarbeiten. In CSS werden sie mit doppeltem Dash (-) und in Präprozessoren des Dollarzeichens ($) bezeichnet.

$ Nummer: 1; $ Farbe: # ff0000; $ Text: "TProger für immer."; $ Text: "Es ist für immer." ! Standard; $ nichts: null;

Sie können einen Standardwert nach Variablen zuweisen, die noch keinen Wert haben, indem Sie noch kein Label hinzufügen! Standard am Ende des Werts. Wenn in diesem Fall die Variable bereits einen Wert zugewiesen wurde, ändert sich er nicht; Wenn die Variable leer ist, wird ein neuer angegebener Wert zugewiesen.

#Container (Inhalt: $ Text;)

SASS-Variablen können jeder Immobilie zugewiesen werden.

Verschachtelte Regeln

Standard-verschachtelte CSS-Elemente mit einem Leerzeichen:

/ * Verschachtelte Regeln * / #A (Farbe: rot;) #a #b (Farbe: Grün;) #a #b #c p (Farbe: blau;)

Die gleichen verschachtelten Gegenstände mit SCSS:

/ * Verschachtelte Regeln * / #A (Farbe: rot; #b (Farbe: Grün; #c p (Farbe: blau;)))

Wie zu sehen ist, sieht die Syntax sauberer und wiederholt ab.

Dies ist besonders nützlich, wenn Sie überlastete Layouts steuern. Somit entspricht die Ausrichtung, in der die angeschlossenen Eigenschaften in dem Code aufgezeichnet werden, vollständig der tatsächlichen Struktur des Anwendungslayouts.

Hinter den Szenen des Preprozessors erstellt es noch den Standard-CSS-Code (oben gezeigt), so dass er im Browser angezeigt werden kann. Wir ändern nur die Art, CSS zu schreiben.

Et-Zeichen

#p (Farbe: Schwarz; A (Font-Weight: Fett; &: Hover (Farbe: rot;))))

Mit dem Symbol können Sie explizit angeben, wo der übergeordnete Wahlschalter eingefügt werden muss.

Das Ergebnis der Kompilierung von SASS (aus dem vorherigen Beispiel) in der folgenden CSS.

#p (Farbe: Schwarz;) #p a (fontgewicht: fett;) #p a: schweb (Farbe: rot;)

Infolgedessen wurde das Amperand im Namen des übergeordneten Elements A (A: HOVER) kompiliert.

Mixins (sie sind Verunreinigungen)

Mixins können auch Selters enthalten, einschließlich Eigenschaften. Und Selektoren können Links zum Elternelement durch Amperand (&) enthalten, erinnern Sie sich daran?

Muster, das mit mehreren Browsern arbeitet

Einige Dinge in CSS sind sehr langweilig zu schreiben, insbesondere in CSS3, wo plus es oft eine große Anzahl von Anbieterpräfixen (-Webkit- oder -Moz-) erfordert.

Mit Mixins können Sie CSS-Deklarationsgruppen erstellen, die Sie mehrmals auf der Website verwenden müssen. Gute Praxis wird die Verwendung von Mixins für Anbieterpräfixe sein. Beispiel:

@Mixin Border-Radius ($ radius) (// Präfixe für: -Webkit-Border-Rand-Radius: $ Radius; // Chrom- und Safari-Foz-Border-Radius: $ Radius; // Firefox-Border-Radius: $ Radius; // Internet Explorer -O-Border-Radius: $ radius; // Opera-Grenzradius: $ radius; // Standard CSS) // Ein Beispiel für die Verwendung des Rand-Radius-Mischers nach seiner Erstellung. Box (@include Grenzradius (10px);)

Rechenoperationen

Wie im wirklichen Leben können Sie nicht mit Zahlen arbeiten, die inkompatible Datentypen sind (z. B. die Zugabe von PX und EM).

Addition und Subtraktion

P (Schriftgröße: 10px + 2em; // Fehler! Schriftgröße: 10px + 6px; // 16px Schriftgröße: 10px + 2; // 12px)

Achten Sie immer auf die Art der gefalteten Daten. Das heißt, Pixel für Pixel, Elefanten an Elefanten. Auf dieselbe Weise funktioniert Subtraktion, aber mit einem Minuszeichen.

Ausführungsbeispiel:

Multiplikation

Es wird auf dieselbe Weise wie in CSS durchgeführt, wobei Calc (A * B) jedoch ohne Calc- und Rundhalterungen verwendet wird. Darüber hinaus können Sie das Zeichen der Multiplikation immer noch durch Leerzeichen von Zahlen (5 * 6 \u003d\u003d 5 * 6) trennen.

Ausnahme kann keine Pixel zwischen sich vermehren. Das heißt, 10px * 10px! \u003d 100px. 10px * 10 \u003d\u003d 100px.

P (Breite: 10px * 10px; // Fehler! Breite: 10px * 10; // 100px Breite: 1px * 5 + 5px; // 10px Breite: 5 * (5px + 5px); // 50px Breite: 5px + ( 10px / 2) * 3; // 20px)

Einteilung

Mit der Division der Dinge ist es etwas schwieriger, aber Sie können es herausfinden, da in der Standard-CSS-Schräglinie (Slash) in der Normal-CSS-Linie (Slash) eine kurze Form von Schreibeigenschaften reserviert ist. Beispiel unten.

/ * Kurzfristige Form der Immobilienaufzeichnung * / Schriftart: Italic Bold .8em / 1.2 Arial, Sans-Serif; / * Standardformular-Aufzeichnungsformular * / Schriftart: Italic; Schriftdicke: fett; Schriftgröße: .8EM; Linienhöhe: 1.2; Schriftfamilie: Arial, Sans-Serif;

Es gibt drei Assistenten, die auf die Möglichkeit der Abteilung angedeutet wurden:

1. Der Wert (oder ein beliebiger Teil davon) wird in einer Variablen gespeichert oder von der Funktion zurückgegeben.
2. Werte sind in Klammern eingeschlossen.
3. Der Wert wird als Teil eines anderen arithmetischen Ausdrucks verwendet.

$ var1: 20; $ var2: 4; P (oben: 16px / 24px; // Zeigt in der Standard-CSS-Oberseite unverändert an: (20px / 5px); // Demurchdringlich (jedoch nur bei Verwendung von Klammern) oben: # ($ var1) / # ($ var2); / / Wird als regulärer CSS-Code angezeigt. Die Division wird nicht ausgeführt: $ var1 / $ var2; // Entscheidungsoberkarten: Random (4) / 5; // Lieferung erfolgt (falls in einem Paar mit einer Funktion verwendet) oben: 2PX / 4PX + 3PX; // Division wird durchgeführt, wenn eine weitere arithmetische Aktion hinzugefügt wird)

CSS-Kompilierungsergebnis:

P (oben: 16px / 24px; oben: 4; oben: 20/4; oben: 5; oben: 0,6; oben: 3.5px;)

Rückstand

Der Rückstand berechnet den Rest der Divisionsoperation. Nachfolgend finden Sie, wie Sie "Zebra" für eine HTML-Liste erstellen können.

@mixin Zebra () (@For $ I ab 1 bis 7 (@F ($ I% 2 \u003d\u003d 1) (.stripe - # ($ i) (Hintergrundfarbe: schwarz; Farbe: weiß;))) * (@include Zebra (); Text-Align: Center;)

Das Erstellen eines Mischens von Zebra ist im Einfügen des Codes von oben gezeigt. Richtlinie @FOR und @IF sind im Abschnitt unten beschrieben.

Um ein Beispiel zu erstellen, müssen Sie mehrere HTML-Elemente schreiben.

Ergebnis im Browser:

Zebra wurde erfolgreich von Mikcin Zebra erzeugt

Betreibervergleich.

Die @IF-Richtlinie akzeptiert den Ausdruck SassScript und verwendet die darin verschachtelten Stile, wenn der Ausdruck einen beliebigen Wert ausgenommen, außer FALSE oder NULL.

Nachfolgend finden Sie gezeigt, wie die Richtlinien @IF und @else in das Mischen investiert werden.

@Mixin-Tinten ($ Padding, $ Margin) (@IF ($ Padding\u003e $ Rand) (Polsterung: $ Padding;) @else (Polsterung: $ Marge;)) .container (@include-Abstand (10px, 20px);)

Vergleich in Aktion. Mixin-Tinten wählen die Größe der Polsterung "und, wenn einer größer als der Rand ist.

Nach dem Kompilieren von CSS:

Behälter (Polsterung: 20px;)

Logikbetreiber

Beschreibung der logischen Betreiber

Verwenden von SASS-logischen Operatoren, um eine Schaltfläche zu erstellen, die den Hintergrund je nach Breite verändert.

@Mixin-Button-Farbe ($ Heights, $ Width) (@IF ((Höhe)< $width) and ($width >\u003d 35px)) (Hintergrundfarbe: blau;) @else (Hintergrundfarbe: Grün;)) .Button (@include-Button-Farbe (20px, 30px))

Saiten

In CSS sind 2 Arten von Saiten definiert: Mit Zitaten und ohne. Sass erkennt beides an. Infolgedessen erhalten Sie in CSS, dass in Sass verwendeten Saiten in CSS.

In einigen Fällen können Sie den zulässigen CSS-Werten ohne Anführungszeichen, jedoch nur, wenn die hinzugefügte Zeichenfolge das endgültige Element ist.

P (font: 50px ari + "al"; // In 50px-Arial kompiliert)

Das folgende Beispiel zeigt, wie sie nicht nötig sind.

P (font: "50px" + Arial; // Fehler!)

Sie können die Linien verschiedener Typen falten, wenn keine Räume in ihnen vorhanden sind. Das nachstehende Beispiel wird nicht kompiliert.

P: After (Inhalt: "RETURN LINUS" + TORVALDS!; // ERROR!)

P: After (Inhalt: "Return Linus" + "Torvalds!"; // Achten Sie auf Torvalds! ")

Ein Beispiel für Zugabe mehrerer Linien:

P: Nach (Inhalt: "Die Los" + "Humanity" + "-" + "Iteration.");)

Zugabe von Zeilen und Zahlen:

P: Nach (Inhalt: "Rekursion" + 2013 + "Verbraucherschweißer";)

beachten Sie Die Content-Eigenschaft funktioniert nur mit Pseudo-Selektoren: vorher und: danach. Es wird empfohlen, Inhalte im CSS-Dokument nicht zu verwenden, sondern auch direkt zwischen den Tags in HTML zu verwenden.

Fließkontrollbediener.

SCSS hat Funktionen (Fucaction ()) und Richtlinie (@Directive). Direkt oben haben wir bereits ein Beispiel für die Funktion betrachtet, wenn die Übertragung von Argumenten in den Mischungen untersucht wurde.

Funktionen bestehen in der Regel in Klammern, die sich sofort für seinen Namen wie folgt befinden. Und die Richtlinie beginnt mit dem Symbol @.

Wie JavaScript können Sie SCSS mit einem Standard-Set von Flusssteuerungsbetreibern zusammenarbeiten.

wenn ()

if () eine Funktion (und manchmal die Grundlage der künstlichen Intelligenz).

Seine Verwendung sieht ziemlich primitiv aus: Der Bediener gibt einen der beiden in der Bedingung angegebenen Werte zurück.

/ * Verwenden der Funktion, wenn () * / if (true, 1px, 2px) \u003d\u003e 1px; Wenn (FALSCH, 1PX, 2PX) \u003d\u003e 2PX;

@wenn.

@IF ist eine Richtlinie, die zur Verzweigung basierend auf dem Zustand verwendet wird.

/ * Verwendung der Richtlinie @IF * / p (@IF 1 + 1 \u003d\u003d 2 (Rand: 1px fest;) @IF 7< 5 { border: 2px dotted; } @if null { border: 3px double; } }

Fertigstellungsergebnis:

P (Rand: 1px fest;)

Nachfolgend finden Sie eine Kombination, die mit der Hinzufügung der @else-Richtlinie verzweigt.

/ * Erstellen Sie eine variable $ type * / $ Type: River; / * Färbung von Behältern in Blau in dem Fall der Wert für die $ Type Variable - River * / div (@IF $ type \u003d\u003d River (Farbe: blau;)) / * Bedingte Farben für Text im Tag

* / P (@IF $ type \u003d\u003d Baum (Farbe: Grün;) @else, wenn $ type \u003d\u003d River (Farbe: blau;) @else, wenn $ type \u003d\u003d Dirt (Farbe: braun;))

Überprüfen Sie die Anwesenheit des übergeordneten Elements

AmpereSand wählt das übergeordnete Element aus, wenn es existiert. In diesem Fall kehrt NULL zurück. Daher kann es in Verbindung mit der @if-Richtlinie verwendet werden.

In den folgenden Beispielen erwägen Sie, bedingte CSS-Styles je nach Anwesenheit des übergeordneten Elements zu erstellen.

/ * Überprüfen Sie, ob das Vorhandensein eines übergeordneten Elements * / @mixin-übergeordnet ist (@IF & (/ * Anwenden einer blauen Farbe an das übergeordnete Element, wenn es existiert * / &: Hover: Blau;)) @else ( / * Eltertliche Das Element ist nicht vorhanden, die Verwendung von Blau bis Referenzen * / A (Farbe: Blau;))))

Richtlinie @For.

Richtlinie @ FOR Zeigt einen Satz von Styles eine Reihe von Zeiten an. Für jede Wiederholung wird eine Zählervariable zur Änderung der Ausgabe verwendet.

Richtlinie @FOR ist 5 mal geeignet.

@For $ i von 1 bis 5 (.definition - # ($ i) (Breite: 10px * $ i;))

CSS-Kompilierungsergebnis:

Definition-1 (Breite: 10px;) .definition-2 (Breite: 20px;) .definition-3 (Breite: 30px;) .Definition-4 (Breite: 40px;) .definition-5 (Breite: 50px;)

Richtlinie @ Aeach.

Die @ aegbare Richtlinie setzt $ var in jede der Werte der Liste oder des Wörterbuchs und zeigt die darin enthaltenen Stile mit dem entsprechenden Wert von $ var an.

@ asche $ Tier in Schnabeltier, Löwe, Schafe, Taube (# ($ tier) -ikon (Hintergrund-Bild: URL ("/ Bilder / # ($ tier) .png")))

CSS-Kompilierungsergebnis:

Platypus-Symbol (Hintergrund-Image: URL ("/ Bilder / Platypus.png");) .lion-Icon (Hintergrund-Image: URL ("/ Bilder / lion.png");) .hep-Symbol (Hintergrund- Bild: URL ("/ Bilder / sheep.png");) .dove-Symbol (Hintergrund-Image: URL ("/ Bilder / dove.png"););)

Richtlinie @ @

Die @ While-Richtlinie akzeptiert den Ausdruck SASSScript und zeigt zyklisch die darin investierten Stile an, bis der Ausdruck als wahr berechnet wird. Es kann verwendet werden, um komplexere Zyklen zu schaffen als diejenigen, für die @For geeignet ist, obwohl es ziemlich selten benötigt wird. Beispielsweise:

$ Index: 5; @ $ $ Index\u003e 0 (.element - # ($ Index) (Breite: 10px * $ Index;) $ Index: $ Index - 1;)

Fertigstellungsergebnis:

Element-5 (Breite: 50px;) .element-4 (Breite: 40px;) .element-3 (Breite: 30px;) .element-2 (Breite: 20px;) .element-1 (Breite: 10px;)

Funktionen in Sass / SCSS

Mit SASS / SCS können Sie Funktionen sowie in anderen Sprachen verwenden.

Erstellen Sie die Three-Hundert-PX-Funktion, die 300pX zurückgibt.

@Function Dreihundert-px () (@return 300px;) .Name (Breite: Dreihundert-px (); Rand: 1px festgrau; Anzeige: Block; Position: absolut;)

Nach dem Auftragen einer Klasse.neuere Breite des Elements ist gleich 300 Pixel.

Funktionen in SASS können alle korrekten CSS-Werte zurückgeben und können jeder Eigenschaft zugewiesen werden. Sie können sogar auf der Grundlage des übertragenen Arguments berechnet werden.

@Function doppelt ($ width) (@return $ width * 2;)

Trigonometrie

Trigonometrische Funktionen SIN () und cos () werden häufig in Form von Embedded-Klassen in vielen Sprachen wie JavaScript gefunden, z. B. JavaScript.

Ihre Arbeit sollte untersucht werden, wenn Sie die Zeit für die Entwicklung von Animationen der Benutzeroberflächenanimationen reduzieren müssen, um beispielsweise einen Trohrrier zu erstellen. Übrigens sind wir bereits in einem der Artikel. In diesem Fall ist es jedoch der Code, und nicht das GIF-Bild in das HTML-Dokument eingefügt.

Nachfolgend finden Sie ein paar Beispiele, um interessante Animationseffekte mit der SIN () -Funktion zu erstellen, in der die Anzahl des Codes minimiert wird. Als Nächstes können Sie dieses Wissen zusammenstellen, um interaktive Benutzeroberflächenelemente (Bewegung in einem Kreis, wellenförmiger Animation) zu erstellen.

Der Vorteil der Verwendung der Trigonometrie in Kombination mit CSS wird in Abwesenheit zusätzlicher HTTP-Anforderungen ausgedrückt, wie dies mit GIF-Bildern passiert.

Sie können trigonometrische Funktionen auf SASS schreiben. Lesen Sie mehr darüber.

Schreiben Sie Ihre eigenen Funktionen

In der Trigonometrie basieren viele Operationen auf Funktionen. Jede Funktion basiert auf einem anderen. Zum Beispiel erfordert die RAD () -Funktion die Verwendung von PI (). Die COS () und SIN () -Funktionen erfordern die Verwendung von rad ().

@function pi () (@return 3.14159265359;)

Schreibfunktionen auf SASS / SCSS sind dem Schreiben von Funktionen in anderen Sprachen sehr ähnlich.

Verwenden der POW () -Funktion:

@Function Pow ($ nummer, $ exp) ($ value: 1; @IF $ exp\u003e 0 (@For $ i von 1 bis $ exp ($ value: $ value * $ nummer;)) @else wenn $ exp< 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }

Verwenden der rad () -Funktion:

@Function Rad ($ Winkel) ($ Einheit: Einheit ($ Winkel); $ uneinheitslos: $ Winkel / ($ Winkel * 0 + 1); // Wenn der Winkelwert (Winkel) in Grad ("DEG") angegeben ist ("DEG") Sie müssen es in Radians umwandeln. @IF $ Unit \u003d\u003d DEG ($ UNIT UNITIGKEIT: $ UNIT UNITIGKEIT / 180 * PI ();) @return $ unitless;)

Um die Tangente zu berechnen, muss die TAN () -Funktion die Funktionen SIN () und COS () anwenden.

26.07.2017

5 beste CSS-Präprozessoren 2017, die Ihren Workflow beschleunigen.

CSS-Präprozessoren sind speziell entwickelt, um die Arbeit von CSS-Programmierern aufregender zu gestalten. Sie ermöglichen es Ihnen, einen leicht editierbaren und zuverlässigen Code mit der Möglichkeit einer wiederholten Verwendung zu schreiben.

Mit anderen Worten, CSS-Präprozessor ist eine Ergänzung zu CSS mit neuen Funktionen: Variablen, Erweiterungen, Importe usw.

In diesem Artikel werde ich über die besten 5 CSS-Präprozessoren von 2017 sprechen.

01. SASS.

SASS ist der beliebteste Präprozessor mit einer riesigen Gemeinschaft und einer leistungsstarken Funktionalität. Es funktioniert nur in Aggregat mit Rubin und ist sehr einfach beim Lernen. Die meisten Front-End-Frameworks wie Bootstrap, Fundament und Materialize werden mit SASS erstellt.

SASS hat zwei Syntax:

• .sass.
• .scss.

02. Stift.

Stylus ist ein weiterer großer Vorverarbeitungsgerät für dynamische CSS-Generation. Wenn Sie die lockigen Klammern, Kommas und Punkte mit einem Komma senken möchten, kann dies die beste Wahl für Sie sein. Stylus arbeitet auf node.js und ist sehr einfach zu installieren und zu verwenden. Es hat viele benutzerdefinierte Funktionen wie Sättigung (). Sie können auch alle Funktionen von anderen führenden Compilern verwenden.

03. Weniger.

Weniger, der auch als weniger als weniger als weniger CSS bekannt ist, ist ein weiterer führender CSS-Präprozessor. Dies ist eine ausgezeichnete Wahl, wenn Sie solche Standardfunktionen als Variablen, eingebettete Stile usw. benötigen. Diese JavaScript-Bibliothek wurde ursprünglich auf Rubin geschrieben.

• Siehe auch:

04. Stilecow.

StyleCow ist ein Vorverarbeitungsgerät, das auf Knoten geschrieben wurde, der mit NPM installiert werden kann. Er hat eine leistungsstarke API, mit der Sie Plugins leicht erstellen können.

05. CSS-CLICK

Präprozessor, der auf PHP erstellt wurde, wird eine hervorragende Option für PHP-Programmierer, da es auf vielen Plattformen funktioniert. CSS-CRICK verfügt über alle üblichen Funktionen von Preprocessor (Variablen, eingebettete Styles usw.)

Fazit

Wenn Sie nach dem besten CSS-Vorprozessor suchen, finden Sie in dem Netzwerk viele verschiedene Optionen. Meiner Meinung nach sind die besten Anfänger-Optionen für Anfänger Sass und Stylus.

Und wenn schließlich diese Entwickler sich beruhigen und aufhören, Neuankömmlinge zu specken!? Ich hatte keine Zeit, mit dem Ende umzugehen CSS., Mir wurde gesagt: "Alle echten Verse haben lange auf Vorverarbeitung umgeschaltet. Nun, was rein rein CSS. Am Eva von 2020! "Was soll ich tun?

Erstens werden die Entwickler niemals aufhören, neue Technologien zu erfinden. Und professionelle Verse - sind ihnen dankbar dafür. Stiltischsprache Sprache CSS., der zu der Zeit erfindet, in der Seiten primitiv waren. Aber die Jahre gingen, die Sehenswürdigkeiten wurden schwieriger und massiv, aber die Layout-Methoden blieben gleich. Die Nippers waren versiegelt, um ähnliche Abschnitte des Codes zu schreiben. Es war unmöglich, die Farbe auf der Website schnell zu ändern. Es besteht Bedarf an einer größeren Layout-Automatisierung und erschien präprozessoren CSS. Code. Und heute werden wir über einen von ihnen sprechen, präprozessor weniger..

Zusammenstellung von Weniger und VS-Code

Alles, was zum Kompilieren erforderlich ist Weniger Code ist der Code-Editor Vs Code. und Erweiterung Einfach weniger.. Wie es funktioniert?

1. Erstellen Sie eine Styles-Datei mit der Erweiterung .Weniger.
2. Erzeugt nach dem Speichern automatisch .css. Datei in demselben Ordner.

Jedes Mal, wenn Sie Änderungen speichern Weniger Dateien werden von B. zusammengestellt. CSS. Dateien. Browser haben noch nicht gelernt, zu verstehen Weniger, Sie brauchen CSS. der Code.

Variablen weniger.

Die am häufigsten verwendeten Eigenschaften, die wir in Variablen enden. Die Site verwendet normalerweise wiederholte Farben und Schriftfamilien. Wir betreten alle Farben in Variablen und ersetzen die Regel nicht den Farbcode, sondern die Variable. Sie fragen: "Was ist der Witz? Sie müssen nicht sowieso etwas registrieren, was ist der Unterschied?"

Das Hauptmerkmal ist ein schneller Farbsatz. Die Farbe ändert sich nur einmal in einer Variablen. Die Farbe in einer Variablen ersetzen wird die Farbe auf allen Seiten der Site ersetzen. Nur ein dieser Chip reicht bereits aus, um mit der Verwendung von zu beginnen Weniger. Erklären variablen in weniger. Und wir halten in ihnen die Werte, die wir brauchen, wir geben den Namen der Variablen sinnvoll an.

@Primary: # 194EB4;
@secundary: # F2B834;
@Success: # 4 cb514;
@Black: # 000;
@white: #fff;

Jetzt schreiben wir den üblichen Code, wie wir es getan haben CSS., Aber anstelle der Werte ersetzen wir Variablen.

Weniger

Div (
Polsterung: 0;

Farbe schwarz;
}

Nach dem Speichern kompiliert CSS. der Code. Wir berühren sich überhaupt nicht CSS. Datei, alle Arbeiten werden in durchgeführt Weniger Datei. Sie können häufig wiederholende Eigenschaften in Variablen erstellen.

CSS.

Div (
Polsterung: 0;
Schriftfamilie: Roboto, Sans-Serif;
Farbe: # 000;
}

Mixin (Mixin) in weniger

Mixin Nützlich, um den Satz von Eigenschaften - Rahmen, Schaltflächen, Header wiederzuverwenden. Ein gruppierter Satz von Eigenschaften kann auf verschiedene Selektoren angewendet werden.

Auf der Website sind mehrere ähnliche Tasten verschiedener Farbschaltflächen, jedoch mit den gleichen Schrifteigenschaften. Erstellen Sie eine Mischung, mit der der Prozess der Erstellung von Schaltflächen automatisiert wird.

Button_font (

Text-Transformation: Großbuchstaben;
Schriftgröße: 18px;
}

Wir mischen das Mischen in den Eigenschaften des Knopfwählers.

Portfolio__button (
Polsterung: 15px 80px;
Farbe: # 344258;
.button_font;
}

Bei der Ausgabe erhalten wir:

Portfolio__button (
Polsterung: 15px 80px;
Farbe: # 344258;
Font-Familie: "DIN PRO BOLD";
Text-Transformation: Großbuchstaben;
Schriftgröße: 18px;
}

Symbol Ampersand.

Verwenden Sie anstelle der Vervielfältigung des Namens des Selektors das Symbol des Ampersands.

Portfolio__item (
Position: relativ;
Hintergrundfarbe: # 3c3c3c;
}
&: Schweben (
Hintergrundfarbe: #ccc;
}
}

CSS.

.portfolio__item (
Position: relativ;
Hintergrundfarbe: # 3c3c3c;
}
.portfolio__item: schweben (
Hintergrundfarbe: #ccc;
}

Medienwünsche in weniger

Sie können Medienanfragen direkt in der Selektor aufnehmen.

Weniger

.Eheader__title (
Farbe: # 344258;
Schriftgröße: 40px;

Polsterung: 0 20px;
@Media nur Bildschirm und (max-width: 320px) (
Schriftgröße: 22px;
}
}

CSS.

.Eheader__title (
Farbe: # 344258;
Schriftgröße: 40px;
Font-Familie: "DIN PRO", Sans-Serif;
Polsterung: 0 20px;
}
@Media nur Bildschirm und (max-width: 320px) (
.Eheader__title (
Schriftgröße: 22px;
}
}

Fazit

Dieser Artikel offenbart nicht 25% aller Möglichkeiten, die angeboten werden Weniger. Ja, es ist nicht notwendig, der Zweck des Artikels ist die Motivation von Neuankömmlingen, mit Vorverarbeitung zu beginnen. Ab dem einfachsten, allmählich in Richtung auf komplexer.