sass - SCSS change variable out of scope from inside @if -

इस सवाल का पहले से ही एक उत्तर है: < / P>

• 1 उत्तर

क्या इसके लिए कोई वैकल्पिक हल है स्थिति, जब आप अपने फ़ंक्शन के दायरे के बाहर एक चर को संशोधित करना चाहते हैं? :

  $ ui- थीम: 'गुलाबी'; @if $ ui- थीम == "गुलाबी" {$ ui-main: # eb82b0; $ Ui-secondary: # fff5f9; $ Ui-third: # f6c2d9; } @else {$ ui-main: # ff8067; $ Ui-secondary: # fff6e5; $ Ui-third: # ffb1a2; } एक {रंग: $ ui-main; पृष्ठभूमि: $ ui-secondary};  

मैं ui-theme नामक वैश्विक वैरिएबल बनाना चाहता हूं जो $ ui-main, $ ui-secondary ... परिभाषा के नीचे लिखे गए सभी अन्य कोड में ऐसा लगता है कि @if जैसे निर्देशों का उपयोग करते समय परिवर्तनीय गुंजाइश भी लागू होती है।

क्या कोई जानता है कि यह कैसे प्राप्त किया जा सकता है?

आपको नियंत्रण ब्लॉक के बाहर अपने चर को प्रारंभ करना है:

  $ ui- थीम: 'गुलाबी'; $ Ui- मुख्य: नल; $ Ui- माध्यमिक: नल; $ Ui-third: नल; @if $ ui- थीम == "गुलाबी" {$ ui-main: # eb82b0; $ Ui-secondary: # fff5f9; $ Ui-third: # f6c2d9; } @else {$ ui-main: # ff8067; $ Ui-secondary: # fff6e5; $ Ui-third: # ffb1a2; } एक {रंग: $ ui-main; पृष्ठभूमि: $ ui-secondary};  

आउटपुट:

  a {color: # eb82b0; पृष्ठभूमि: # fff5f9; }  

कूट कोडिंग वैरिएबल के बजाय @ शामिल करें के माध्यम से ही करना संभव है।

_pink.scss: < / P>

  $ ui-main: # eb82b0; $ Ui-secondary: # fff5f9; $ Ui-third: # f6c2d9;  

शैलियां.scss:

<पूर्व> @ "गुलाबी" शामिल करें; // या यदि आप डिफ़ॉल्ट रंग $ ui-main: # ff8067 डिफ़ॉल्ट चाहते हैं, तो कुछ भी शामिल न करें; $ Ui-secondary: # fff6e5! डिफ़ॉल्ट; $ Ui-third: # ffb1a2! डिफ़ॉल्ट; एक {रंग: $ ui-main; पृष्ठभूमि: $ ui-secondary};