जावास्क्रिप्ट

Question

से सीएसएस मॉड्यूल चर अद्यतन करें मैं प्रतिक्रिया-बॉयलरप्लेट का एक (अब पुराना) संस्करण उपयोग कर रहा हूं जो सीएसएस मॉड्यूल के साथ आया था। उनके बारे में क्या अच्छा है कि आप चर बना सकते हैं और उन्हें अन्य सीएसएस फाइलों में आयात कर सकते हैं।

यहाँ मेरी colors.css फ़ाइल है

:root { 
    /* Status colors */ 
    --error: #842A2B; 
    --success: #657C59; 
    --pending: #666; 
    --warning: #7E6939; 
} 

जब मैं मैं बस अपना .css फ़ाइल के शीर्ष पर उपयोग करने के लिए है कि फ़ाइल आयात कर रहा हूँ:

@import 'components/App/colors.css'; 

मैं करने के लिए देख रहा हूँ मेरी वेबसाइट के लिए दो विषयों के लिए विकल्प है और मैं जावास्क्रिप्ट के साथ उन चरों को गतिशील रूप से अद्यतन करने में सक्षम होना चाहता हूं। ऐसा करने का सबसे अच्छा तरीका क्या है?

संपादित करें: मैं उम्मीद कर रहा था कि colors.css फ़ाइल को अपडेट करने का कोई तरीका है और दो संभावित सीएसएस फ़ाइलों से प्राप्त होने वाले सभी घटकों में सशर्त आयात नहीं करना है ... अगर मुझे ऐसा करने का कोई तरीका है तो मुझे बताएं और यदि मैं स्वीकार किए गए उत्तर को बदल दूंगा। उत्तर देने वाले सभी के लिए धन्यवाद!

Answer 1

क्या आप यह देख रहे हैं?

 // get the inputs 
 
     const inputs = [].slice.call(document.querySelectorAll('.controls input')); 
 

 
     // listen for changes 
 
     inputs.forEach(input => input.addEventListener('change', handleUpdate)); 
 
     inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); 
 

 
     function handleUpdate(e) { 
 
     // append 'px' to the end of spacing and blur variables 
 
     const suffix = (this.id === 'base' ? '' : 'px'); 
 
     document.documentElement.style.setProperty(`--${this.id}`, this.value + suffix); 
 
     }

:root { 
 
    --base: #ffc600; 
 
    --spacing: 10px; 
 
    --blur: 10px; 
 
} 
 

 
body { 
 
    text-align: center; 
 
} 
 

 
img { 
 
    padding: var(--spacing); 
 
    background: var(--base); 
 
    -webkit-filter: blur(var(--blur)); 
 
    /* */ 
 
    filter: blur(var(--blur)); 
 
} 
 

 
.hl { 
 
    color: var(--base); 
 
} 
 

 
/* 
 
     misc styles, nothing to do with CSS variables 
 
     */ 
 

 
body { 
 
    background: #193549; 
 
    color: white; 
 
    font-family: 'helvetica neue', sans-serif; 
 
    font-weight: 100; 
 
    font-size: 50px; 
 
} 
 

 
.controls { 
 
    margin-bottom: 50px; 
 
} 
 

 
a { 
 
    color: var(--base); 
 
    text-decoration: none; 
 
} 
 

 
input { 
 
    width:100px; 
 
}

<h2>Update CSS Variables with <span class='hl'>JS</span></h2> 
 
<div class="controls"> 
 
    <label>Spacing:</label> 
 
    <input type="range" id="spacing" min="10" max="200" value="10"> 
 

 
    <label>Blur:</label> 
 
    <input type="range" id="blur" min="0" max="25" value="10"> 
 

 
    <label>Base Color</label> 
 
    <input type="color" id="base" value="#ffc600"> 
 
</div> 
 

 
<img src="http://unsplash.it/800/500?image=899"> 
 

 
<p class="love"></p> 
 

 
<p class="love">Chrome 49+, Firefox 31+</p>

Answer 2

मैं सिर्फ का प्रयोग करेंगे डिफ़ॉल्ट रंग तत्व/body/जो कुछ भी है, तो दूसरी कक्षा में वैकल्पिक विषय रंग डाल पर वार्स, और जे एस के माध्यम से विषय वर्ग टॉगल। यहां एक डेमो है।

$("button").on("click", function() { 
 
    $("body").toggleClass("foo"); 
 
});

body { 
 
    --red: red; 
 
    --blue: blue; 
 
    --yellow: yellow; 
 
    background: #ccc; 
 
    text-align: center; 
 
    font-size: 5em; 
 
} 
 

 
.foo { 
 
    --red: #ce1126; 
 
    --blue: #68bfe5; 
 
    --yellow: #ffd100; 
 
} 
 

 
.red { 
 
    color: var(--red); 
 
} 
 

 
.blue { 
 
    color: var(--blue); 
 
} 
 

 
.yellow { 
 
    color: var(--yellow); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="red">RED</span> <span class="blue">BLUE</span> <span class="yellow">YELLOW</span> 
 
<br> 
 
<button>click me</button>

Answer 3

2 चादरें है और सशर्त दोनों के बीच स्विच होगा:

colours.scss

:root { 
    /* Status colors */ 
    --error: #842A2B; 
    --success: #657C59; 
    --pending: #666; 
    --warning: #7E6939; 
} 

otherColours.scss

:root { 
    /* Status colors */ 
    --error: #FF0000; 
    --success: #00FF00; 
    --pending: #6666FF; 
    --warning: #FF00FF; 
} 

अपने में

तो कोड आयात उन्हें प्रतिक्रिया और उन्हें इस्तेमाल के रूप में आप चाहते हैं:

import styles from 'colours.scss'; 
import alternativeStyles from 'otherColours.scss'; 

... 

{this.props.useNormalStyle ? styles.myClass : alternativeStyles.myClass}