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!