color schemer
v0.2.8
Color Schemer ist ein robustes Farb-Toolset für Sass. Es erweitert die vorhandenen Sass-Farbfunktionen und fügt Dinge wie RYB-Manipulation, * Set-Hue, * Set-Lightness, Tint, Shade und mehr hinzu. Es nutzt diese Tools auch und fügt ein voll funktionsfähiges Farbschema-Tool hinzu, mit dem Sie eine Primärfarbe festlegen und um diese herum ganze Farbschemata erstellen können.
gem install color-schemer in Ihrem Terminal.
require 'color-schemer' für Ihre Compass-Konfigurationsdatei.
@import 'color-schemer' in Ihr Stylesheet.
tint($color, $amount) – Mischt die Farbe mit Weiß. Die meisten Designer fühlen sich damit viel wohler als mit lighten() .shade($color, $amount) – Wie oben, fügt aber Schwarz hinzu. Designer bevorzugen es möglicherweise gegenüber darken() .equalize($color) – Gibt eine vollständig gesättigte Farbe zurück.set-red($color, $red) – Legt den Rotanteil in einer Farbe fest.set-green($color, $green) — Legt den Grünanteil einer Farbe fest.set-blue($color, $blue) – Legt den Blauanteil einer Farbe fest.set-hue($color, $hue) – Legt den Farbton einer Farbe fest.set-saturation($color, $saturation) – Legt die Sättigung einer Farbe fest.set-lightness($color, $lightness) — Legt die Helligkeit einer Farbe fest.set-alpha($color, $alpha) – Legt das Alpha einer Farbe fest. Der Farbschemata fügt eine Reihe von Funktionen hinzu, um den roten, gelben und blauen Farbkreis zu manipulieren. Computerfarben werden in Rot, Grün und Blau berechnet, was technisch korrekter ist, aber Künstler und Designer verwenden RYB schon seit langem, um bessere Farbbeziehungen zu erzielen.
ryb-hue($color) – Findet den Farbton einer Farbe im RYB-Farbkreis.set-ryb-hue($color, $hue) – Legt den Farbton einer Farbe basierend auf dem RYB-Farbkreis fest.ryb-adjust-hue($color, $degrees) – Passt den Farbton einer Farbe im RYB-Farbkreis an.ryb-complement($color) – Findet das RYB-Komplement einer Farbe.ryb-invert($color) – Invertiert eine Farbe um den RYB-Farbkreis. cmyk($cyan, $magenta, $yellow, $black) – Definieren Sie Farben mithilfe von CMYK-Werten. Fügen Sie diese Funktionen überall dort ein, wo Sie eine Farbe aus dem Schema verwenden möchten. Sie können sie weiter bearbeiten, damit sie zu Ihrem Design passen. Diese sollten als guter Ausgangspunkt betrachtet werden, da Sie vielleicht noch etwas weiter optimieren möchten.
cs-primary() – Primärfarbe.cs-secondary() – Sekundärfarbe.cs-tertiary() – Tertiärfarbe.cs-quadrary() – Quadrärfarbe. Sie können das Ergebnis der oben genannten Funktionen ändern, indem Sie diese globalen Variablen festlegen:
$cs-primary – legt die Primärfarbe in einem Farbschema fest.$cs-scheme – Mono, Komplement, Triade, Tetrade, analog, akzentuiert-analog$cs-hue-offset – Ausmaß der Farbtonanpassung in Schemata.$cs-brightness-offset – Ausmaß der Helligkeitsanpassung in Schemata.$cs-color-model – rgb, ryb Das Farbschema umfasst SCSS-Mischmodi, mit denen Sie Farben im Photoshop-Stil mischen können.
Obwohl Sie diese Funktionen sofort verwenden können , möchten Sie sie möglicherweise noch etwas verfeinern. Ich schlage vor, dass Sie mit ihnen Variablen erstellen, nur für den Fall, dass Sie Anpassungen vornehmen oder Dinge verschieben möchten, anstatt sich auf diese unverändert zu verlassen.
$primary : cs-primary ();
$secondary : darken ( cs-secondary (), 10 % ); // too light, darkening this up a bit.
$tertiary : cs-tertiary ();
$quadrary : cs-quadrary ();Ebenfalls enthalten ist ein praktisches Mixin zum Ausprobieren von Farbschemata. Fügen Sie es einfach in eine Liste Ihrer Farben ein und es wird ein Farbbalken über Ihrer Seite eingefügt.
@include cs-test ( red green blue );Copyright (c) 2011 Scott Kellum (@scottkellum) und Mason Wendell (@canarymason)
Hiermit wird jeder Person, die eine Kopie dieser Software und der zugehörigen Dokumentationsdateien (die „Software“) erhält, kostenlos die Erlaubnis erteilt, mit der Software ohne Einschränkung zu handeln, einschließlich und ohne Einschränkung der Rechte zur Nutzung, zum Kopieren, Ändern und Zusammenführen , Kopien der Software zu veröffentlichen, zu verteilen, unterzulizenzieren und/oder zu verkaufen und Personen, denen die Software zur Verfügung gestellt wird, dies zu gestatten, vorbehaltlich der folgenden Bedingungen:
Der obige Urheberrechtshinweis und dieser Genehmigungshinweis müssen in allen Kopien oder wesentlichen Teilen der Software enthalten sein.
DIE SOFTWARE WIRD „WIE BESEHEN“ ZUR VERFÜGUNG GESTELLT, OHNE JEGLICHE AUSDRÜCKLICHE ODER STILLSCHWEIGENDE GEWÄHRLEISTUNG, EINSCHLIESSLICH, ABER NICHT BESCHRÄNKT AUF DIE GEWÄHRLEISTUNG DER MARKTGÄNGIGKEIT, EIGNUNG FÜR EINEN BESTIMMTEN ZWECK UND NICHTVERLETZUNG. IN KEINEM FALL SIND DIE AUTOREN ODER COPYRIGHT-INHABER HAFTBAR FÜR JEGLICHE ANSPRÜCHE, SCHÄDEN ODER ANDERE HAFTUNG, WEDER AUS EINER VERTRAGLICHEN HANDLUNG, AUS HANDLUNG ODER ANDERWEITIG, DIE SICH AUS, AUS ODER IN VERBINDUNG MIT DER SOFTWARE ODER DER NUTZUNG ODER ANDEREN HANDELN IN DER SOFTWARE ERGEBEN SOFTWARE.
