color schemer
v0.2.8
مخطط الألوان عبارة عن مجموعة أدوات ألوان قوية لـ Sass. فهو يوسع وظائف ألوان Sass الحالية ويضيف أشياء مثل معالجة RYB و*ضبط اللون و*ضبط الإضاءة والصبغة والظل والمزيد. كما أنه يعزز هذه الأدوات بإضافة أداة تخطيط ألوان كاملة الميزات تسمح لك بتعيين لون أساسي واحد وإنشاء أنظمة ألوان كاملة حوله.
gem install color-schemer في المحطة الخاصة بك.
require 'color-schemer' في ملف تكوين البوصلة الخاص بك.
@import 'color-schemer' إلى ورقة الأنماط الخاصة بك.
tint($color, $amount) - يمزج اللون مع اللون الأبيض. يشعر معظم المصممين براحة أكبر مع هذا من lighten() .shade($color, $amount) - نفس ما ورد أعلاه ولكنه يضيف اللون الأسود. قد يفضله المصممون على darken() .equalize($color) - إرجاع لون مشبع بالكامل.set-red($color, $red) - يضبط مقدار اللون الأحمر في اللون.set-green($color, $green) - يضبط مقدار اللون الأخضر في اللون.set-blue($color, $blue) - يضبط مقدار اللون الأزرق في اللون.set-hue($color, $hue) - يضبط تدرج اللون.set-saturation($color, $saturation) - يضبط تشبع اللون.set-lightness($color, $lightness) - يضبط خفة اللون.set-alpha($color, $alpha) - يضبط ألفا اللون. يضيف مخطط الألوان عددًا من الوظائف للتعامل مع عجلة الألوان الأحمر والأصفر والأزرق. يتم حساب لون الكمبيوتر باللون الأحمر والأخضر والأزرق وهو أكثر صحة من الناحية الفنية ولكن الفنانين والمصممين يستخدمون RYB على مر العصور للتوصل إلى علاقات ألوان أفضل.
ryb-hue($color) - سيتم العثور على درجة اللون على عجلة الألوان RYB.set-ryb-hue($color, $hue) - يضبط تدرج اللون بناءً على عجلة الألوان RYB.ryb-adjust-hue($color, $degrees) - سيتم ضبط درجة اللون حول عجلة الألوان RYB.ryb-complement($color) - يبحث عن مكمل RYB للون.ryb-invert($color) — يعكس لونًا حول عجلة الألوان RYB. cmyk($cyan, $magenta, $yellow, $black) - تحديد الألوان باستخدام قيم CMYK. قم بإسقاط هذه الوظائف في أي مكان تريد استخدام لون من المخطط فيه. يمكنك التعامل معها بشكل أكبر لجعلها تعمل مع التصميم الخاص بك. ينبغي اعتبار هذه نقطة انطلاق جيدة حيث قد ترغب في إجراء المزيد من التعديلات عليها.
cs-primary() — اللون الأساسي.cs-secondary() - اللون الثانوي.cs-tertiary() — اللون الثالث.cs-quadrary() — اللون الرباعي. يمكنك تغيير نتيجة الوظائف المذكورة أعلاه عن طريق تعيين هذه المتغيرات العامة:
$cs-primary - قم بتعيين اللون الأساسي في نظام الألوان.$cs-scheme — أحادي، مكمل، ثلاثي، رباعي، تناظري، تناظري معلم$cs-hue-offset — مقدار تعديل تدرج اللون في المخططات.$cs-brightness-offset - مقدار ضبط السطوع في المخططات.$cs-color-model — rgb, ryb يشتمل مخطط الألوان على أوضاع مزيج SCSS التي تسمح لك بمزج الألوان بأسلوب الفوتوشوب.
بينما يمكنك استخدام هذه الوظائف خارج الصندوق، فقد ترغب في ضبطها أكثر قليلاً. أقترح عليك إنشاء متغيرات باستخدامها فقط في حالة رغبتك في إجراء تعديلات/تحريك الأشياء بدلاً من الاعتماد عليها كما هي.
$primary : cs-primary ();
$secondary : darken ( cs-secondary (), 10 % ); // too light, darkening this up a bit.
$tertiary : cs-tertiary ();
$quadrary : cs-quadrary ();يتضمن أيضًا مزيجًا مفيدًا لاختبار أنظمة الألوان. ما عليك سوى تضمينه مع قائمة الألوان الخاصة بك وسيضيف شريطًا من الألوان أعلى صفحتك.
@include cs-test ( red green blue );حقوق الطبع والنشر (ج) 2011 لسكوت كيلوم (@scottkellum) وماسون ويندل (@canarymason)
يُمنح الإذن مجانًا لأي شخص يحصل على نسخة من هذا البرنامج وملفات الوثائق المرتبطة به ("البرنامج")، للتعامل في البرنامج دون قيود، بما في ذلك، على سبيل المثال لا الحصر، حقوق الاستخدام والنسخ والتعديل والدمج. ونشر و/أو توزيع وترخيص من الباطن و/أو بيع نسخ من البرنامج، والسماح للأشخاص الذين تم توفير البرنامج لهم بالقيام بذلك، وفقًا للشروط التالية:
يجب تضمين إشعار حقوق الطبع والنشر أعلاه وإشعار الإذن هذا في جميع النسخ أو الأجزاء الكبيرة من البرنامج.
يتم توفير البرنامج "كما هو"، دون أي ضمان من أي نوع، صريحًا أو ضمنيًا، بما في ذلك، على سبيل المثال لا الحصر، ضمانات القابلية للتسويق والملاءمة لغرض معين وعدم الانتهاك. لا يتحمل المؤلفون أو أصحاب حقوق الطبع والنشر بأي حال من الأحوال المسؤولية عن أي مطالبة أو أضرار أو مسؤولية أخرى، سواء في إجراء العقد أو الضرر أو غير ذلك، الناشئة عن أو خارج أو فيما يتعلق بالبرنامج أو الاستخدام أو المعاملات الأخرى في برمجة.
