दिलचस्प पोस्ट
ई-मेल पते वेबपेज पर बॉट से सुरक्षित करना चाहते हैं? जावास्क्रिप्ट फ़ंक्शन पर एलियासिंग काम नहीं करता विंडोज में / dev / null? ASP.Net MVC में उप-निर्देशिका को "देखें / साझा" फ़ोल्डर में जोड़ने और दृश्य कॉल करने के लिए मैं एक HTML "विकल्प" टैग पर टूलटिप कैसे दिखा सकता हूं? ओविन की GetExternalLoginInfoAsync हमेशा रिक्त स्थान देता है Php स्ट्रिंग से सभी एचटीएमएल टैग निकालें क्या "दोस्ताना यूआरएल" बनाता है? जावा में लिंक्ड सूची की एक सरणी नहीं बना सकता …? Xcode 4: आप कंसोल को कैसे देखते हैं? मापदंडों के साथ डीजेन्गा रिटर्न डायरेक्ट () एंड्रॉइड एमुलेटर कुंजीपटल इनपुट नहीं लेता – एसडीके टूल्स री 20 एजेएक्स अनुरोध पर फायर ग्रीसंबीकी स्क्रिप्ट चेतावनी: वर्टेक्स शेडर का उत्पादन 'v_gradient' टुकड़ा शेडर द्वारा नहीं पढ़ा गया Linux में निष्पादन योग्य द्वारा उपयोग किए गए सभी साझा लाइब्रेरी कैसे दिखाएं?

कम सीएसएस का उपयोग कर चर वैरिएबल को परिभाषित करना

कहो कि मेरे पास तीन अलग रंग योजनाएं हैं जो किसी साइट के विभिन्न पृष्ठों पर उपयोग की जाती हैं। प्रत्येक रंग में एए प्रकाश, मध्यम और काले रंग की परिभाषा निर्धारित की जाती है, और रंग योजना को शरीर में एक वर्ग द्वारा परिभाषित किया जाता है। मान लें कि "लाल" रंग योजना डिफ़ॉल्ट है इस कदर:

रंग परिभाषाएं :

@red-lt: #121; @red-md: #232; @red-dk: #343; @green-lt: #454; @green-md: #565; @green-dk: #676; @blue-lt: #787; @blue-md: #898; @blue-dk: #909; 

बुनियादी डिफ़ॉल्ट शैली उदाहरण

 body { background-color: @red-dk; #container { background-color: @red-md; p { color: @red-dk; } } } 

अलग रंग योजना शैली उदाहरण

 body.green { background-color: @green-dk; #container { background-color: @green-md; p { color: @green-dk; } } } 

मैं चर का उपयोग करना चाहूंगा ताकि प्रत्येक योजना के लिए सभी रंग भिन्नताओं को दोबारा लिखना न पड़े, ताकि मैं इस तरह कुछ लिख सकूं:

 body.[color-var] { background-color: @[color-var]-dk; #container { background-color: @[color-var]-md; p { color: @[color-var]-dk; } } } 

… लेकिन मैं यह कैसे पूरा करने के लिए चारों ओर अपने सिर लपेट नहीं कर सकता मदद…?

Solutions Collecting From Web of "कम सीएसएस का उपयोग कर चर वैरिएबल को परिभाषित करना"

वांछित प्रभाव प्राप्त करने के लिए चयनकर्ता और पैरामीट्रिक मिक्सिक्स में प्रक्षेप और भागने , कोष्ठकों का उपयोग करें:

  • प्रक्षेप द्वारा डायनामिक चर : एक स्ट्रिंग में, "@{variable}" को "@{variable}" के मान से बदल दिया गया है। उन्हें नेस्टेड भी किया जा सकता है: @{@{var}-foo} और @var: bar; , परिणाम "barfoo"
    परिणामस्वरूप मूल्य उद्धृत किया गया है इन उद्धरणों को हटाने के लिए, उपसर्ग ~
  • चयनकर्ता प्रक्षेप द्वारा डायनामिक चयनकर्ता : body.@{var} body.bar में बदल जाता है

उदाहरण:

 @red-md: #232; @red-dk: #343; .setColor(@color) { body.@{color} { background-color: ~"@{@{color}-dk}"; #container { background-color: ~"@{@{color}-md}"; p { color: ~"@{@{color}-md}"; } } } } .setColor(~"red"); // Escape to prevent "red" turning "#FF0000" //.setColor(~"blue"); etc.. 

में बदल जाता है:

 body.red { background-color: #334433; } body.red #container { background-color: #223322; } body.red #container p { color: #223322; } 

नोट: जब जवाब मूल रूप से लिखा गया था, तो चयनकर्ता प्रक्षेप मौजूद नहीं था। समाधान के लिए पिछले संशोधन देखें अगर आप पुराने कम संकलक (कम 1.3.1 ए से पहले) के साथ काम कर रहे हैं। पुरानी विधि का समर्थन कम 1.4.0 में गिरा दिया जाएगा।

यदि वे मान वास्तव में इस तरह से एक उम्मीदवार प्रारूप का पालन करते हैं, तो पैरामीट्रिक मिक्सिन के लिए एक आदर्श मामला जैसा लगता है:

कम:

 @red: #232; @green: #565; @blue: #898; .theme (@color) { background-color: @color - #111; #container { background-color: @color; p { color: @color + #111; } } } body.red { .theme(@red); } 

संकलित सीएसएस:

 body.red{background-color:#112211;} body.red #container{background-color:#223322;} body.red #container p{color:#334433;} 

मुझे पता है कि यह प्रश्न बहुत पुराना है, लेकिन जो लोग इस पोस्ट पर आते हैं, उनके लिए संभवतः मदद मिल सकती है

मैं वास्तव में यह सुनिश्चित नहीं कर रहा हूँ कि आप इसका उपयोग क्यों करना चाहते हैं, लेकिन मेरा एक सुझाव @ स्कॉट्स उत्तर पर आधारित है। मेरी असली दुनिया में, मुझे एक वेब ऐप बनाना है, जहां यह कई ब्रांड दिखाएगा और प्रत्येक ब्रांड के पास अपना स्वयं का पाठ रंग, पृष्ठभूमि और इतने पर होगा … तो मैं इसे कम करने के लिए एक मार्ग का पीछा करना शुरू कर दिया, क्या मैं आसानी से SASS पर कर सकते हैं और परिणाम नीचे है:

कम से

 // Code from Seven Phase Max // ............................................................ // .for .for(@i, @n) {.-each(@i)} .for(@n) when (isnumber(@n)) {.for(1, @n)} .for(@i, @n) when not (@i = @n) { .for((@i + (@n - @i) / abs(@n - @i)), @n); } // ............................................................ // .for-each .for(@array) when (default()) {.for-impl_(length(@array))} .for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))} .for-impl_(@i) {.-each(extract(@array, @i))} // Brands @dodge : "dodge"; @ford : "ford"; @chev : "chev"; // Colors @dodge-color : "#fff"; @ford-color : "#000"; @chev-color : "#ff0"; // Setting variables and escaping than @brands: ~"dodge" ~"ford" ~"chev"; // Define our variable .define(@var) { @brand-color: '@{var}-color'; } // Starting the mixin .color() { // Generating the loop to each brand .for(@brands); .-each(@name) { // After loop happens, it checks what brand is being called .define(@name); // When the brand is found, match the selector and color .brand-@{name} & { color: @@brand-color; } } } .carColor { .color(); } 

टी परिणाम होगा:

सीएसएस

 .brand-dodge .carColor { color: "#fff"; } .brand-ford .carColor { color: "#000"; } .brand-chev .carColor { color: "#ff0"; } 

यह बहुत मुश्किल है और मुझे कई तत्वों का उपयोग करना था जिनकी मुझे जरूरत थी, पहले सात चरण मैक्स द्वारा उपलब्ध कराए गए मिश्रणों का एक सेट था और आप इसे यहां और यहां से पा सकते हैं, @ स्कॉट्स का जवाब वह टुकड़ा था जो मेरी पहेली से दूर था … आशा है कि यह आपको और अन्य लोगों को एक अन्य चर का हिस्सा बनने के लिए वेरिएबल्स का एक सेट बनाने की ज़रूरत है और अधिक गतिशील कम फ़ाइल बना देगा।

आप http://lesstester.com/ पर अपना पूरा कोड कॉपी कर सकते हैं।

मेरे ज्ञान के लिए, चर चर नाम कम में समर्थित नहीं हैं। फिर भी आप अपने घोषणाओं को एक और अर्थ रूप से पुनर्गठन कर सकते हैं:

 /* declare palette */ @red-lt: #121; @red-md: #232; @red-dk: #343; @green-lt: #454; @green-md: #565; @green-dk: #676; @blue-lt: #787; @blue-md: #898; @blue-dk: #909; /* declare variables based on palette colors */ @lt: @red-lt; @md: @red-md; @dk: @red-dk; /* ...and only use them for main declarations */ body { background-color: @dk; #container { background-color: @md; p { color: @dk; } } } 

यह आपको स्पष्ट रंग संदर्भों से बचने के द्वारा काफी दर्द रहित पट्टियों के बीच स्विच करना चाहिए।

इसे इस्तेमाल करे

 @red-lt: #121; @red-md: #232; @red-dk: #343; @green-lt: #454; @green-md: #565; @green-dk: #676; @blue-lt: #787; @blue-md: #898; @blue-dk: #909; @color: 'red-lt'; div{ background: @@color; border: 1px solid lighten(@@color,20%); }