Farbe Alchemie mit weniger: Erstellen Sie Farbschemata und Paletten

Farbe ist eines der wichtigsten Elemente in jedem visuellen Design. Wenn es ordnungsgemäß verwendet wird, kann es einen großen Einfluss auf Ihre Website oder Anwendung haben. Aber die Farbtheorie zu kennen, reicht jedoch nicht aus, um solche Auswirkungen zu erzielen. Sie müssen über den richtigen Werkzeuggürtel verfügen, um mit der Vielzahl von Farben einfach und erfolgreich zu arbeiten. Glücklicherweise löst dieses praktische Problem weniger, indem sie viele Farbfunktionen zur Arbeit bietet.

In diesem Tutorial werde ich untersuchen, wie man einige dieser Farbfunktionen in Verbindung mit anderen weniger Funktionen verwendet, um flexible und wiederverwendbare Mixins für die Farbmanipulation zu erstellen.

Key Takeaways

• Weniger liefert eine Vielzahl von Farbfunktionen, mit denen wir wirkende Farbschemata und Paletten für das Webdesign erstellen können. Diese Funktionen können in Verbindung mit anderen weniger Merkmalen verwendet werden, um flexible und wiederverwendbare Mixins für die Farbmanipulation zu erzeugen.
• Erstellen von Farbschemata mit weniger beinhaltet die Definition einer Basisfarbe und die Verwendung der Funktion Spin (), um Farbvarianten zu erstellen. Diese Varianten können in eine Liste gesteckt und nach Bedarf extrahiert werden, wodurch die Erstellung verschiedener Arten von Farbschemata ermöglicht werden kann.
• weniger kann verwendet werden, um verschiedene Arten von Farbpaletten durch die Verwendung von Schleifen und bedingten Aussagen zu erzeugen. Die Spin () -Funktion kann verwendet werden, um ein vollständiges Farbspektrum zu erstellen, während die Funktionen von leichten () und dunklen () verwendet werden können, um Tinten und Schatten einer bestimmten Farbe zu erstellen.
• Die Verwendung weniger für die Farbalchemie bietet mehrere Vorteile, einschließlich der Erstellung konsistenter und harmonischer Farbschemata, der einfachen Anpassung von Farbschemata, indem sie einfach die Grundfarbe ändern, und die Fähigkeit, skalierbare und wiederverwendbare Farbschemata zu erstellen.

Farbschemata erstellen

Wenn Sie versuchen, Farbschemata mit weniger zu erstellen, verfolgen die meisten Menschen den offensichtlichsten Ansatz, der so aussieht:

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

Diese Methode verwendet Variablen und weniger spin (), um ein Farbschema (in unserem Fall triadisch) zu erstellen. Dies funktioniert gut, aber für mich ist es nicht besonders wiederverwendbar und nicht flexibel genug. Glücklicherweise kann das Problem durch die Verwendung von Mixins gelöst werden. Mal sehen, was ich meine.

.<span>analog(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 30);
</span>  @<span>second: spin(@color, -30);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 120);
</span>  @<span>second: spin(@color, -120);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 90);
</span>  @<span>second: spin(@color, -90);
</span>  @<span>third: spin(@color, 180);
</span>  @<span>list: @first, @second, @third;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}</span>

Der obige Code erstellt drei Arten von Farbschemata. Ich werde nur den letzten erklären, weil die ersten beiden die gleiche Struktur haben und keine individuellen Erklärungen benötigen.

Das .quad () Mixin nimmt drei Parameter. Der erste setzt die Grundfarbe für das Schema. Der zweite teilt dem Mixin, welche Farbvariante zurückkehren soll. Und die dritte definiert, welche CSS -Eigenschaft verwendet werden soll, wenn der Code weniger kompiliert. Im Körper des Mixins erstellt die Spin () -Funktion die drei verfügbaren Farbvarianten in einem Quad -Schema, dann werden diese Varianten in eine Liste eingesetzt. Die Funktion extract () erhält die gewünschte Variante, die im zweiten Parameter definiert ist. Und schließlich wird die Farbvariante mit Hilfe einer variablen Interpolation der definierten CSS -Eigenschaft zugeordnet.

Wir können jetzt den obigen Code in eine separate Datei namens Color_Schemes einfügen und wie folgt verwenden:

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

Hier importieren wir die Datei mit den Farbschemata und definieren dann die Grundfarbe für unsere Website oder Anwendung. Die letzten drei Zeilen im DIV-Regelsatz definieren die Farben für die Eigenschaften der Grenzfarbe, Farbe und Hintergrundfarbe.

Wie Sie sehen, kann das Mixin mit jeder Eigenschaft verwendet werden, deren erwarteter Wert eine Farbe ist. Außerdem ist es super leicht zu erkennen, für welche Eigenschaften eine bestimmte Aussage verwendet wird. Schauen Sie sich einfach das Ende an und Boom, wir wissen es. In der letzten Anweisung können Sie beispielsweise deutlich sehen, dass die erste Farbvariante des Quad-Schemas als Wert für die Hintergrundfarbe verwendet wird. Ziemlich cool, huh?

Und hier ist die kompilierte Ausgabe:

.<span>analog(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 30);
</span>  @<span>second: spin(@color, -30);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 120);
</span>  @<span>second: spin(@color, -120);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 90);
</span>  @<span>second: spin(@color, -90);
</span>  @<span>third: spin(@color, 180);
</span>  @<span>list: @first, @second, @third;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}</span>

Siehe den Stift xwxmep von sitepoint (@sitepoint) auf CodePen.

Farbpaletten erzeugen

In diesem Abschnitt zeige ich Ihnen, wie Sie verschiedene Arten von Farbpaletten erstellen. Zu diesem Zweck verwende ich weniger spezifische Schleifen und bedingte Aussagen (Mixin Guards). Wenn Sie mit diesen Konstrukten nicht vertraut sind, können Sie sich meine vorherigen Artikel zu diesen Themen kurz ansehen.

Im ersten Beispiel erstelle ich ein Mixin, das eine Farbtabelle erzeugt. Sie haben einen Farbwähler verwendet, oder? Also weißt du was ich meine.

<span>@import "color_schemes.less";
</span>
<span><span>@base-color: #00ff00; 
</span></span><span>
</span><span>div {
</span>  <span>width: 200px;
</span>  <span>height: 100px;
</span>  <span>border: thick solid;
</span>  .<span>quad(@base-color, 3, border-color);
</span>  .<span>quad(@base-color, 2, color);
</span>  .<span>quad(@base-color, 1, background-color);
</span><span>}</span>

Das .Color-palette () Mixin nimmt drei tatsächliche Argumente ein. Der erste definiert die Grundfarbe für die Palette. Der zweite definiert, wie viele Farbfelder generiert werden sollen. Und der dritte setzt den für die Spin () -Funktion benötigten Spinschritt.

Tatsächlich gibt es noch ein Argument: @Index. Aber es wird nur intern verwendet, um die Schleife zum Laufen zu bringen. Da es im obigen Code festgelegt ist, wird die Schleife 25 -mal durch den Code iteriert und 25 CSS -Klassen erstellt - eines für jedes Swatch. Jeder Klassenname wird nach dem .Swatch- [number] -Mustern konstruiert (z. B. .Swatch-1).

Die Farbe für jedes Swatch wird unter Verwendung des Werts der Multiplikation des aktuellen Index mit dem Spinschritt erzeugt. Dieser Wert wird dem Wert der Basisfarbe für jede Iteration der Schleife hinzugefügt. Dies erzeugt das vollständige Farbspektrum, beginnt und endet mit der gleichen Farbe (in unserem Fall rot).

Hier ist die kompilierte Ausgabe:

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

Siehe den Stift, der eine Farbpalette mit weniger von SitePoint (@sinepoint) auf CodePen erzeugt.

Dieses Mixin kann verwendet werden, um jede Art von Farbtabelle mit einer beliebigen Anzahl von Farbfeldern und einem größeren oder kleineren Spin -Schritt zu erstellen. Sie können beispielsweise nur vier Farbfelder mit einem Spinschritt von 90 Grad erzeugen, der Farbfelder für ein quadratisches Farbschema erzeugt. Sie haben endlose Möglichkeiten. Mach einfach weiter und mache deine eigenen Experimente.

Im nächsten Beispiel werden wir ein Mixin erstellen, das Farbtöne und Schattierungen einer bestimmten Farbe erzeugt. Nach Wikipedia:

Eine Farbton ist die Mischung einer Farbe mit Weiß, die die Leichtigkeit erhöht, und ein Schatten ist die Mischung einer Farbe mit Schwarz, die die Leichtigkeit verringert.

Wie wir in einer Minute sehen werden, können Farbtöne und Farbtöne mit Hilfe von weniger integrierten Funktionen von weniger erstellt werden.

.<span>analog(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 30);
</span>  @<span>second: spin(@color, -30);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 120);
</span>  @<span>second: spin(@color, -120);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 90);
</span>  @<span>second: spin(@color, -90);
</span>  @<span>third: spin(@color, 180);
</span>  @<span>list: @first, @second, @third;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}</span>

Diese Version der .Color-Palette () Mixin nimmt zwei tatsächliche Argumente ein-den Typ der Palette (Farbtöne oder Farbtöne) und die Grundfarbe. Um das Umschalten zwischen Schattierungen und Farbtönen zu ermöglichen, wird der & Bediener in Verbindung mit dem WO -Keyword verwendet. Dies bedeutet, dass der Code mit der Funktion "Darken ()" als erster Parameter "Farbtöne" verwendet wird.

Die Hintergrundfarbe in beiden Fällen wird durch die Funktion "leichte () bzw. dunklen () erzeugt, die die definierte Basisfarbe und den aktuellen Index multipliziert mit zehn Prozent verwendet. Achten Sie auf den relativen Parameter. Es ist wichtig, es einzubeziehen, damit die Anpassung relativ zum aktuellen Wert ist.

Hinweis: Machen Sie sich keine Sorgen, dass die beiden Mixins einen und denselben Namen teilen. Dank der Mustern-Matching-Funktion wird weniger wissen, welches zu verwenden ist.

Hier ist die kompilierte Ausgabe:

<span>@import "color_schemes.less";
</span>
<span><span>@base-color: #00ff00; 
</span></span><span>
</span><span>div {
</span>  <span>width: 200px;
</span>  <span>height: 100px;
</span>  <span>border: thick solid;
</span>  .<span>quad(@base-color, 3, border-color);
</span>  .<span>quad(@base-color, 2, color);
</span>  .<span>quad(@base-color, 1, background-color);
</span><span>}</span>

Siehe den Stift, der ein Farbmarkt mit weniger von sitepoint (@sinepoint) auf CodePen erzeugt.

Zusammenfassung

Es gibt viele andere Dinge, die Sie mit Farben und mit der großen Anzahl von Farbfunktionen, die von weniger bereitgestellt wurden, tun können. Aber hey, du willst kein Tutorial mit 10.000 Wörtern, oder? Die angegebenen Beispiele reichen aus, um Ihnen den Einstieg zu erleichtern und Ihnen einen Überblick über die verfügbaren Möglichkeiten zu geben. Es liegt an Ihnen, tiefer zu tauchen und weiter zu experimentieren. Glücklich weniger codieren!

häufig gestellte Fragen zur Farbalchemie mit weniger

Was ist eine Farbalchemie mit weniger und wie funktioniert es? Sie können Variablen, Mixins, Funktionen und viele andere Techniken definieren, mit denen Sie CSS herstellen können, die wartbarer, thematischer und erweiterbarer sind. Mit weniger können Sie eine Grundfarbe erstellen und dann Funktionen zum Aufhellen, Verdunkeln, Sättigen, Entsättigieren, Drehen und Mischen von Farben verwenden und ein harmonisches Farbschema für Ihre Website oder Anwendung erstellen.

Wie kann ich eine erstellen Das Farbschema mit weniger? Zum Beispiel können Sie die Aufleichter- und Verdunklenfunktionen verwenden, um leichtere und dunklere Schattierungen der Grundfarbe zu erzeugen. Sie können auch die Sättigungs- und Entsättigungsfunktionen verwenden, um die Intensität der Farbe anzupassen, und die Spinfunktion, um komplementäre Farben zu erstellen. Durch die Kombination dieser Funktionen können Sie eine breite Palette von Farbschemata erstellen. Sie können Farbschemata erstellen, die konsistent und harmonisch sind und die visuelle Attraktivität Ihrer Website oder Anwendung verbessern können. Es macht es auch einfach, Ihr Farbschema anzupassen, da Sie einfach die Grundfarbe ändern können und der Rest der Farben automatisch aktualisiert wird. Darüber hinaus können Sie mit LEWern Farbschemata erstellen, die skalierbar und wiederverwendbar sind, was Ihnen langfristig Zeit und Mühe sparen kann. > Weniger ähnelt anderen CSS -Präprozessoren wie Sass in Bezug auf seine Fähigkeit, Farbschemata zu erstellen. Less hat jedoch eine einfachere Syntax und ist leichter zu lernen, was es für Anfänger zu einer guten Wahl macht. Es hat auch eine robuste Reihe von Funktionen zum Manipulieren von Farben, die Ihnen mehr Kontrolle über Ihr Farbschema geben können. Für das Webdesign können Sie es auch für das Druckdesign verwenden. Sie können ein Farbschema mit weniger erstellen und dann als CSS -Datei exportieren, die in Druckdesign -Software verwendet werden kann. Beachten Sie jedoch, dass Farben aufgrund von Unterschieden in den Farbräumen unterschiedlich auf dem Bildschirm und im Druck auftreten können. Online, um mehr über Farb Alchemie mit weniger zu erfahren. Sie können zunächst die offizielle weniger Dokumentation lesen, die einen umfassenden Überblick über die Sprache und ihre Funktionen bietet. Es gibt auch viele Tutorials und Anleitungen, die Sie durch das Erstellen eines Farbschemas mit weniger führen können.

Kann ich Farbalchemie mit weniger für mobiles App -Design verwenden? Mit Less können Sie ein konsistentes Farbschema erstellen, das auf verschiedenen Plattformen, einschließlich mobiler Apps, verwendet werden kann. Dies kann dazu beitragen, eine konsistente Benutzererfahrung auf allen Plattformen zu gewährleisten. Schreiben Sie Ihren weniger Code und einen weniger Compiler, um Ihren weniger Code in CSS zu kompilieren. Es gibt viele kostenlose und kostenpflichtige Textredakteure und weniger Compiler, sodass Sie diejenigen auswählen können, die Ihren Anforderungen und Einstellungen am besten entsprechen.

Ja, Sie können Farbalchemie mit weniger verwenden, selbst wenn Sie Farbe blind sind. Mit Weniger können Sie Farbschemata erstellen, die auf mathematischen Funktionen basieren, sodass Sie sich nicht auf Ihre Farbwahrnehmung verlassen müssen. Möglicherweise möchten Sie jedoch Feedback von anderen erhalten, um sicherzustellen, dass Ihr Farbschema für alle Benutzer optisch ansprechend und zugänglich ist. Wenn Sie Probleme mit Ihrem weniger Farbschema haben, können Sie mehrere Schritte unternehmen. Überprüfen Sie zunächst Ihren weniger Code auf Fehler. Wenn Ihr Code korrekt ist, passen Sie Ihre Basisfarbe oder die Parameter Ihrer Funktionen an. Wenn Sie weiterhin Probleme haben, sollten Sie Hilfe bei weniger Community oder einem professionellen Webdesigner suchen.

Das obige ist der detaillierte Inhalt vonFarbe Alchemie mit weniger: Erstellen Sie Farbschemata und Paletten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!