रंग और लेस / सैस में उनके बीच अंतर

दो रंगों के अंतर को कैसे समझें? एक रंग योजना से 360 कैसे बनाएं? उस योजना के रंगों को कैसे बदलना है जो हमारे पास चर में है जो एक आधार रंग पर निर्भर करता है और सीएसएस प्रीप्रोसेसर में इसका उपयोग करता है? हम इसके बारे में बाद में अधिक जानेंगे: हमें इसकी आवश्यकता क्यों है, LESS (Sass) में रंगों और योजनाओं के साथ किस तरह के ज्यूसेक संभव हैं, और कौन सी सेवाएं हमें दो रंगों को एक में बदलने में मदद करेगी और पहले के ऊपर कार्य करेगी। लेख उन लोगों के लिए दिलचस्प होगा जो सीएसएस प्रीप्रोसेसर, उनमें चर, साथ ही साथ फ़ंक्शन / अशुद्धियों का उपयोग करते हैं।

प्रेरणा

बेस रंगों के आधार पर एक गतिशील योजना बनाने के लिए तैयार रंगों से

चलो तर्क के साथ शुरू करते हैं - हमें इसकी आवश्यकता क्यों है? इसलिए, हम लेआउट डिजाइनर की भूमिका में हैं और डिजाइनर ने हमें साइट / सिस्टम / एलिमेंट / ब्लॉक के लिए रंगों का एक सेट फेंक दिया, जिसे हम एक रंग योजना के रूप में परिभाषित करते हैं। लेआउट पर हम देखते हैं कि रंग एक दूसरे से भरोसेमंद रूप से परस्पर निर्भर हैं। मान लीजिए कि डिजाइनर ने हमें 5 रंग फेंक दिए और सबसे अधिक संभावना है HEX प्रारूप में: # FF0000, # E82C0C, # FF530D, # E80C7A, # FF0DFF। ये पत्र और संख्या हमें क्या बताते हैं? कुछ नहीं - यह आदमी की तुलना में मॉनिटर के लिए अधिक समझने योग्य है।

हम क्या कर सकते हैं?

सबसे आसान विकल्प LESS में 5 चर बनाना है ( सादगी के लिए, हम इसे सीएसएस प्रीप्रोसेसर के प्रतिनिधियों में से एक के रूप में उपयोग करेंगे ), इन मूल्यों को उनके पास सेट करें और भूल जाएं:

@clr-base: #FF0000; @clr-header: #E82C0C; @clr-button: #FF530D; @clr-link: #E80C7A; @clr-hover: #FF0DFF; 

दूसरा विकल्प एचएसएल (ह्यू, संतृप्ति, लपट) में प्रत्येक रंग का प्रतिनिधित्व करना है, जो अधिक मानव-उन्मुख मूल्य हैं और उन्हें चर के मूल्यों के रूप में छोड़ देते हैं। क्रोम में, यह "रंग प्रारूप" / "एचएसएल" सेटिंग का उपयोग करके किया जा सकता है।

 @clr-base: hsl( 0, 100%, 50%); @clr-header: hsl( 9, 90%, 48%); @clr-button: hsl( 17, 100%, 53%); @clr-link: hsl(330, 90%, 48%); @clr-hover: hsl(300, 100%, 53%); 

यह पहले से ही अच्छा लग रहा है, लेकिन क्या इसे बेहतर किया जा सकता है? उदाहरण के लिए, केवल आधार रंग में मूल्य छोड़ दें, और रंग कार्यों के माध्यम से दूसरों की गणना करें!

 @clr-base: hsl( 0, 100%, 50%); @clr-header: spin(desaturate(darken(@clr-base, 2%), 10%), 8); @clr-button: spin(lighten(@clr-base, 3%), 17); @clr-link: spin(desaturate(darken(@clr-base, 2%), 10%), -30); @clr-hover: spin(lighten(@clr-base, 3%), -60); 

यह हमें क्या देता है? सबसे पहले, केवल एक चर है - आधार रंग, जब बदला जाता है, तो साइट की पूरी रंग योजना बदल जाएगी। दूसरे, रंगों की अन्योन्याश्रयता में अधिक दृश्यता, जो यथासंभव मानवीय रूप से व्यक्त की जाती है। उदाहरण के लिए, हम तुरंत समझते हैं कि बटन का रंग 17 डिग्री पर रंग पहिया पर घुमाया जाता है और बेस रंग को थोड़ा हल्का करता है।

माईसेल्फ कलर स्कीम डिज़ाइनर और Adobe Kuler

एक अन्य उपयोग मामला स्वतंत्र रूप से या सेवाओं का उपयोग करके एक मूल रंग योजना बनाने के लिए है: समान, एक रंग (निश्चित टोन), त्रय, पूरक, समग्र, एक रंग (निश्चित टोन और संतृप्ति)। इसे चर के एक सेट के रूप में प्रस्तुत करें जो बेस रंग पर निर्भर करता है। और फिर सेवा का उपयोग करने की आवश्यकता के बिना, इसे गर्म / ठंडा, हल्का / गहरा, अमीर / इसके विपरीत बना दें। और यह सब, केवल एक चर को बदलना।

यह वास्तव में कहां काम आ सकता है? उदाहरण के लिए, हम वेबसाइटों को प्रवाहित करते हैं और कुछ प्रकार के डिज़ाइन टेम्पलेट का उपयोग करते हैं। इसमें, हम एक समान योजना पेश कर सकते हैं और पहले से ही अगले ग्राहक अपने बेस रंग का उपयोग करके एक प्रोटोटाइप को रोल आउट कर सकते हैं, शाब्दिक रूप से सेकंड में।

यह हमें एक बार एक सर्किट बनाने का अवसर देगा, और इससे "इंजेक्ट", अपेक्षाकृत बोलना, 360 सर्किट।

स्पष्ट रूप से देखें कि रंगों में क्या अंतर है

यहां तक ​​कि अगर हमें उस तरह की चीजों को जटिल करने की आवश्यकता नहीं है, लेकिन हम यह नहीं समझना चाहते हैं कि दो रंगों के बीच अंतर क्या है, उदाहरण के लिए, ढाल और अंत की शुरुआत, तो हमें इस ज्ञान से मदद मिलेगी कि एचएसएल के रूप में रंगों का प्रतिनिधित्व किया जा सकता है। लेकिन अगर लोगों ने कंप्यूटर का आविष्कार किया तो दिमाग में गणना क्यों?

अंतर कैसे पता करें?

जैसा कि ऊपर उल्लेख किया गया है, मैनुअल थेरेपी विधि का उपयोग करते हुए, एचईएक्स आरजीबी से एचएसएल तक रंग अनुवाद और घटकों के बीच अंतर की गणना। इसने मुझे तुरंत बोर करना शुरू कर दिया और, नोड.जेएस के साथ खेलने के बाद, मैंने एक छोटी उपयोगिता / सेवा लिखी जो इसे स्वचालित रूप से करने में मदद करती है: garex.imtqy.com/nodejs-colors-to-less-operations

पहले कॉलम में हम आधार रंग / रंगों में प्रवेश करते हैं, और दूसरे में - आश्रित। "गो" बटन दबाकर, हमारे पास रंग लेस कार्यों का एक सेट है जो एक रंग को दूसरे में बदलने के लिए आवश्यक है। Sass के लिए, फ़ंक्शन के नाम समान हैं, रंग पहिया को चालू करने के कार्य को छोड़कर: LESS में हमारे पास spin , और Sass में हमारे पास अधिक स्पष्ट रूप adjust-hue कहा जाता है।

निष्कर्ष

अंत में, हमने सीखा कि कैसे सीएसएस प्रीप्रोसेसरों में रंग योजनाओं को चेतन करें और इसके लिए संभव तरीके / सेवाएं / उपयोगिताओं। टिप्पणियों में मैं सुझाव देता हूं कि कौन लोग अपने LESS / SASS / YourCSSHere परियोजनाओं में चर और निर्भरता को व्यवस्थित करते हैं। मुझे उम्मीद है कि लेख "कैसे एक उल्लू आकर्षित करने के लिए" की शैली में काम नहीं किया?

मुद्दों और पुल अनुरोधों का स्वागत है। आपका ध्यान देने के लिए धन्यवाद।