मैं CSS में रंगों को चर के रूप में कैसे परिभाषित कर सकता हूं?


216

मैं एक सीएसएस फ़ाइल पर काम कर रहा हूं जो काफी लंबी है। मुझे पता है कि ग्राहक रंग योजना में परिवर्तन के लिए पूछ सकता है, और सोच रहा था: क्या चर को रंग आवंटित करना संभव है, ताकि मैं बस एक चर को बदलकर नए रंग को उन सभी तत्वों पर लागू कर सकूं जो इसका उपयोग करते हैं?

कृपया ध्यान दें कि मैं सीएसएस फ़ाइल को गतिशील रूप से बदलने के लिए PHP का उपयोग नहीं कर सकता।


संभावित डुबकी ... stackoverflow.com/questions/47487/…
एडी


यह मदद कर सकता है: stackoverflow.com/questions/15831657/…
DreamTeK

जवाबों:


225

CSS Variables के साथ CSS इसका मूल रूप से समर्थन करता है ।

उदाहरण सीएसएस फ़ाइल

:root {
    --main-color:#06c;
}

#foo {
    color: var(--main-color);
}

एक कार्यशील उदाहरण के लिए, कृपया इसे देखें JSFiddle (उदाहरण से पता चलता है कि फेल्ड में सीएसएस चयनकर्ताओं में से एक को नीले रंग में कोडित किया गया है, अन्य सीएसएस चयनकर्ता सीएसएस चर का उपयोग करता है, मूल और वर्तमान दोनों सिंटैक्स का उपयोग करता है, जिससे रंग नीला हो जाएगा। ।

जावास्क्रिप्ट / क्लाइंट पक्ष में एक सीएसएस चर हेरफेर

document.body.style.setProperty('--main-color',"#6c0")

समर्थन सभी आधुनिक ब्राउज़रों में है

फ़ायरफ़ॉक्स 31+ , क्रोम 49+ , सफारी 9.1+ , माइक्रोसॉफ्ट एज 15+ और ओपेरा 36+ सीएसएस चर के लिए देशी समर्थन के साथ जहाज।


3
बस अगर कोई और इसे पढ़ता है और इसे सफारी में काम करने की कोशिश करता है - सीएसएस के लिए समर्थन वसंत / गर्मी 2013 में वेबकिट से हटा दिया गया लगता है। Bugs.webkit.org/show_bug.cgi?id=114119 list.webkit.org /pipermail/webkit-dev/2013-April/024476.html फिर भी ऊपर उल्लिखित ध्वज को सक्षम करने के बाद क्रोम में काम करता है।
मैरी फिशर

क्रोम 36 पर परीक्षण किया गया, सक्षम ध्वज के साथ भी काम नहीं कर रहा है। फिर भी फ़ायरफ़ॉक्स के साथ काम करता है
युवी

बस इसे क्रोम संस्करण 49.0.2623.110 मीटर के साथ जांचा और यह अभी भी काम नहीं करता है।
राडू

आपका ओएस क्या है? इसने मेरे लिए काम किया: संस्करण 49.0.2623.110 (64-बिट) मैक ओएस एक्स पर
आर्थर वेबोर

मेरे Android के Chrome संस्करण Android 5.1.0 Chrome 49.0.2623.105 पर भी काम किया
आर्थर वेबर्ग

66

लोग मेरे उत्तर को जारी रखते हैं, लेकिन यह एक भयानक समाधान है, जो कि सास की खुशी या उससे कम है , विशेष रूप से इन दोनों दिनों के लिए गुई का उपयोग करना आसान है । अगर आपको कोई मतलब है तो नीचे दी गई हर बात को नजरअंदाज करें।

आप चर के एक प्रकार के रूप में सेवा करने के लिए प्रत्येक रंग से पहले सीएसएस में एक टिप्पणी डाल सकते हैं, जिसे आप खोजने / बदलने का उपयोग करने के मूल्य को बदल सकते हैं, इसलिए ...

सीएसएस फ़ाइल के शीर्ष पर

/********************* Colour reference chart****************
*************************** comment ********* colour ******** 

box background colour       bbg              #567890
box border colour           bb               #abcdef
box text colour             bt               #123456

*/

बाद में CSS फ़ाइल में

.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}

फिर, उदाहरण के लिए, उस बॉक्स पाठ के लिए रंग योजना बदलें, जिसे आप खोजते / बदलते हैं

/*bt*/#123456

3
आईई फिल्टर का उपयोग करते समय टिप्पणियों को जोड़ना कुछ मामलों में काम नहीं करेगा, जैसे। मैं यहाँ टिप्पणी नहीं कर सकता -> फ़िल्टर: प्रोगिड: DXImageTransform.Microsoft.gradient (startColorstr = '# 3f5619', endColorstr = '# 77842f', Gradientype = 0); / * IE6-9 * /
कार्टर मेडलिन

1
नीच क्योंकि आप सही हैं, यह एक भयानक समाधान है।
AndroidDev

मैंने सर्वर साइड सॉल्यूशंस पर व्यक्तिगत रूप से आपके क्लाइंट की उत्तर शैली को प्राथमिकता दी, इसलिए मैंने इसे करने के लिए कुछ बनाया। यह आश्चर्यजनक नहीं है, लेकिन यह stackoverflow.com/a/44936706/4808079 पर
Seph Reed

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

38

CSS स्वयं चर का उपयोग नहीं करता है। हालाँकि, आप वैरिएबल का उपयोग करके अपनी स्टाइल को परिभाषित करने के लिए SASS जैसी दूसरी भाषा का उपयोग कर सकते हैं , और स्वचालित रूप से CSS फाइलों का उत्पादन कर सकते हैं, जिन्हें आप तब वेब पर रख सकते हैं। ध्यान दें कि आपको अपने सीएसएस में परिवर्तन करने पर हर बार जनरेटर को फिर से चलाना होगा, लेकिन यह इतना कठिन नहीं है।


12
मुझे लगता है कि उत्तर अब (2016) गलत है, है ना? हालांकि मुझे लगता है कि यह अभी भी SASS या इस तरह का उपयोग करने के लिए बेहतर हो सकता है।
कोडेनोबोब

CSS वर्जन का उपयोग SASS के लिए बेहतर हो सकता है क्योंकि SASS रंगों के साथ केवल सांख्यिकीय रूप से बदला जा सकता है। सीएसएस वर्जन के साथ रंगों को रनटाइम पर बदला जा सकता है, यानी आप जावास्क्रिप्ट का उपयोग करके एक बटन के साथ "डार्क मोड" पर जा सकते हैं।
निक क्रू

24

आप CSS3 चर की कोशिश कर सकते हैं :

body {
  --fontColor: red;
  color: var(--fontColor);
}

1
नोट: कस्टम गुण उपसर्ग var- पहले की कल्पना में था, लेकिन बाद में बदलकर - फ़ायरफ़ॉक्स 31 और इसके बाद के संस्करण नए कल्पना का पालन करें। (बग 985838) डेवलपर.
mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

20

कोई आसान सीएसएस केवल समाधान है। आप ऐसा कर सकते हैं:

  • अपनी CSS फ़ाइल में background-colorऔर उसके सभी उदाहरण खोजें और colorप्रत्येक अद्वितीय रंग के लिए एक वर्ग नाम बनाएँ।

    .top-header { color: #fff; }
    .content-text { color: #f00; }
    .bg-leftnav { background-color: #fff; }
    .bg-column { background-color: #f00; }
  • इसके बाद अपनी साइट पर हर एक पृष्ठ पर जाएं जहां रंग शामिल था और रंग और पृष्ठभूमि रंग दोनों के लिए उपयुक्त कक्षाएं जोड़ें।

  • अंतिम, अपने नए बनाए गए रंग वर्गों के अलावा अपने सीएसएस में रंगों के किसी भी संदर्भ को हटा दें।


1
लेकिन क्या होगा अगर ग्राहक तय करता है कि वे सभी लाल तत्वों को हरा बनाना चाहते हैं? आपको "रंग: हरा" प्रदान करने के लिए "लाल" वर्ग को बदलना होगा, जिसे भ्रमित करना और बनाए रखना मुश्किल है।
सिंगवॉल्फबॉय

@singingwolfboy, मुझे कक्षाओं के नामकरण में अधिक विशिष्ट होना चाहिए था। यह उल्लेख करना सबसे आसान है कि वे किस तत्व से संबंधित हैं ताकि आप भविष्य में उन्हें आसानी से संशोधित कर सकें।
कोरी बल्लू

8
@downvoters, यह एक CSS केवल समाधान है। स्क्रिप्टिंग या सीएलआई से जुड़े बहुत सारे वैकल्पिक समाधान हैं, यह ऐसा करने के इच्छुक लोगों के लिए नहीं है
कोरी बल्लू

17

Yeaeaaahhh .... अब आप CSS में var ( ) फंक्शन का उपयोग कर सकते हैं ...

अच्छी खबर यह है कि आप इसे जावास्क्रिप्ट एक्सेस का उपयोग करके बदल सकते हैं , जो विश्व स्तर पर भी बदल जाएगा ...

लेकिन उन्हें कैसे घोषित किया जाए ...

यह काफी सरल है:

उदाहरण के लिए, आप ए #ff0000को असाइन करना चाहते हैं var(), बस इसे असाइन करें :root, इस पर भी ध्यान दें --:

:root {
    --red: #ff0000; 
}

html, body {
    background-color: var(--red); 
}

अच्छी बातें यह हैं कि ब्राउज़र का समर्थन बुरा नहीं है, इसके लिए ब्राउज़र की तरह उपयोग किए जाने के लिए संकलित होने की आवश्यकता नहीं है LESSया SASS...

ब्राउज़र का समर्थन

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

const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');

9

CSS के लिए 'लेस' रूबी जेम कमाल की लगती है।

http://lesscss.org/


2
मुझे लगता है कि LESS की सुंदरता यह है कि यह रूबी या कोई विशिष्ट ढांचा नहीं है। यह 'संकलित' क्लाइंट-साइड हो सकता है या किसी भी अन्य ढांचे जैसे django-css github.com/dziegler/django-css या कुछ के साथ उपयोग किया जा सकता है
xster

9

हाँ, निकट भविष्य में (मैं इसे जून 2012 में लिखता हूँ) आप कम / sass आदि का उपयोग किए बिना देशी सीएसएस चर को परिभाषित कर सकते हैं! वेबकिट इंजन ने पहले सीएसएस चर नियमों को लागू किया, इसलिए क्रोम और सफारी के अत्याधुनिक संस्करण उनके साथ काम करने के लिए पहले से ही हैं। देखें सरकारी वेबकिट (क्रोम / सफारी) विकास लॉग एक ऑनसाइट सीएसएस ब्राउज़र डेमो के साथ।

उम्मीद है कि हम अगले कुछ महीनों में देशी सीएसएस चर के व्यापक ब्राउज़र समर्थन की उम्मीद कर सकते हैं।


2
@ डैनियल उस 2015 को
बनाइए

4

समर्थन के कारण css3 चर का उपयोग न करें।

यदि आप एक शुद्ध सीएसएस समाधान चाहते हैं तो मैं निम्नलिखित करूंगा।

  1. रंग वर्गों का उपयोग वीर्य नाम के साथ करें ।

    .bg-primary   { background: #880000; }
    
    .bg-secondary { background: #008800; }
    
    .bg-accent    { background: #F5F5F5; }
  2. त्वचा से संरचना अलग करें (OOCSS)

    /* Instead of */
    
    h1 { 
        font-size: 2rem;
        line-height: 1.5rem;
        color: #8000;
    }
    
    /* use this */
    
    h1 { 
        font-size: 2rem;
        line-height: 1.5rem;
    }
    
    .bg-primary {
        background: #880000;
    }
    
    /* This will allow you to reuse colors in your design */
  3. आवश्यकतानुसार बदलने के लिए इन्हें अलग सीएसएस फ़ाइल के अंदर रखें।


3

आप जावास्क्रिप्ट को जावास्क्रिप्ट के माध्यम से पारित कर सकते हैं और COLOUR1 के सभी उदाहरणों को एक निश्चित रंग के साथ बदल सकते हैं (मूल रूप से इसे regex) और एक बैकअप स्टाइलशीट प्रदान करें जिससे अंतिम उपयोगकर्ता JS बंद कर दिया गया हो


3

मैं स्पष्ट नहीं हूं कि आप PHP का उपयोग क्यों नहीं कर सकते हैं। आप तब अपनी इच्छानुसार केवल चर जोड़ सकते हैं और उपयोग कर सकते हैं, फ़ाइल को एक PHP फ़ाइल के रूप में सहेज सकते हैं और उस .php फ़ाइल को .css फ़ाइल के बजाय शैली पत्रक के रूप में लिंक कर सकते हैं।

यह PHP होने की जरूरत नहीं है, लेकिन आप मुझे क्या मतलब है।

जब हम प्रोग्रामिंग सामान चाहते हैं, तो सीएसएस (शायद) चर जैसी चीजों का समर्थन करने तक प्रोग्रामिंग भाषा का उपयोग क्यों नहीं करते?

इसके अलावा, निकोल सुलिवन के ऑब्जेक्ट-ओरिएंटेड सीएसएस देखें


हम सभी PHP का उपयोग नहीं कर सकते क्योंकि नौकरी के लिए हममें से कुछ की आवश्यकता होती है!

3

dicejs.com (औपचारिक रूप से cssobjs) SASS का क्लाइंट-साइड संस्करण है। आप अपने CSS में चर सेट कर सकते हैं (json स्वरूपित CSS में संग्रहीत) और अपने रंग चर का फिर से उपयोग करें।

//create the CSS JSON object with variables and styles
var myCSSObjs = {
  cssVariables : {
    primaryColor:'#FF0000',
    padSmall:'5px',
    padLarge:'$expr($padSmall * 2)'
  }
  'body' : {padding:'$padLarge'},
  'h1' : {margin:'0', padding:'0 0 $padSmall 0'},
  '.pretty' : {padding:'$padSmall', margin:'$padSmall', color:'$primaryColor'}
};

//give your css objects a name and inject them
$.cssObjs('myStyles',myCSSObjs).injectStyles();

और यहाँ एक पूर्ण डाउनलोड करने योग्य डेमो का लिंक दिया गया है जो थोड़ा और अधिक उपयोगी है तो उनके प्रलेखन: dicejs डेमो


यह उपकरण 2014 में अब उपलब्ध नहीं है
डैनियल

3

SCSS का उपयोग करने पर विचार करें। यह सीएसएस सिंटैक्स के साथ पूर्ण संगत है, इसलिए एक वैध सीएसएस फ़ाइल भी एक मान्य एससीएसएस फ़ाइल है। यह प्रवासन को आसान बनाता है, बस प्रत्यय को बदल दें। इसके कई संवर्द्धन हैं, सबसे उपयोगी चर और नेस्टेड चयनकर्ता हैं।

क्लाइंट को शिपिंग करने से पहले इसे सीएसएस में बदलने के लिए आपको इसे प्री-प्रोसेसर के जरिए चलाना होगा।

मैं कई वर्षों से एक कट्टर सीएसएस डेवलपर रहा हूं, लेकिन जब से खुद को एससीएसएस में एक परियोजना करने के लिए मजबूर किया गया है, मैं अब कुछ और उपयोग नहीं करूंगा।


2

यदि आपके पास अपने सिस्टम पर रूबी है तो आप ऐसा कर सकते हैं:

http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html

यह रेल के लिए बनाया गया था, लेकिन इसे अकेले चलाने के लिए इसे कैसे संशोधित किया जाए, इसके लिए नीचे देखें।

आप इस विधि का उपयोग रेल से स्वतंत्र रूप से कर सकते हैं, एक छोटी रूबी आवरण स्क्रिप्ट लिखकर, जो site_settings.rb के साथ संयोजन के रूप में काम करती है और आपके CSS-path को ध्यान में रखती है, और जिसे आप अपने CSS को फिर से जेनरेट करने के लिए हर बार कॉल कर सकते हैं (जैसे साइट स्टार्टअप के दौरान)

आप रूबी को किसी भी ऑपरेटिंग सिस्टम पर चला सकते हैं, इसलिए यह काफी स्वतंत्र होना चाहिए।

उदाहरण के लिए आवरण: generate_CSS.rb (जब भी आपको अपनी CSS बनाने की आवश्यकता हो तो इस स्क्रिप्ट को चलाएं)

#/usr/bin/ruby  # preferably Ruby 1.9.2 or higher
require './site_settings.rb' # assuming your site_settings file is on the same level 

CSS_IN_PATH  = File.join( PATH-TO-YOUR-PROJECT, 'css-input-files')
CSS_OUT_PATH = File.join( PATH-TO-YOUR-PROJECT, 'static' , 'stylesheets' ) 

Site.generate_CSS_files( CSS_IN_PATH , CSS_OUT_PATH )

इसके बाद site_settings.rb में generate_CSS_files विधि को इस तरह संशोधित करने की आवश्यकता है:

module Site
#   ... see above link for complete contents

  # Module Method which generates an OUTPUT CSS file *.css for each INPUT CSS file *.css.in we find in our CSS directory
  # replacing any mention of Color Constants , e.g. #SomeColor# , with the corresponding color code defined in Site::Color
  #
  # We will only generate CSS files if they are deleted or the input file is newer / modified
  #
  def self.generate_CSS_files(input_path = File.join( Rails.root.to_s , 'public' ,'stylesheets') , 
                              output_path = File.join( Rails.root.to_s , 'public' ,'stylesheets'))
    # assuming all your CSS files live under "./public/stylesheets"
    Dir.glob( File.join( input_path, '*.css.in') ).each do |filename_in|
      filename_out = File.join( output_path , File.basename( filename_in.sub(/.in$/, '') ))

      # if the output CSS file doesn't exist, or the the input CSS file is newer than the output CSS file:
      if (! File.exists?(filename_out)) || (File.stat( filename_in ).mtime > File.stat( filename_out ).mtime)
        # in this case, we'll need to create the output CSS file fresh:
        puts " processing #{filename_in}\n --> generating #{filename_out}"

        out_file = File.open( filename_out, 'w' )
        File.open( filename_in , 'r' ).each do |line|
          if line =~ /^\s*\/\*/ || line =~ /^\s+$/             # ignore empty lines, and lines starting with a comment
            out_file.print(line)
            next
          end
          while  line =~ /#(\w+)#/  do                         # substitute all the constants in each line
            line.sub!( /#\w+#/ , Site::Color.const_get( $1 ) ) # with the color the constant defines
          end
          out_file.print(line)
        end
        out_file.close
      end # if ..
    end
  end # def self.generate_CSS_files

end # module Site


2

निश्चित रूप से, कई वर्गों की अद्भुत दुनिया के लिए धन्यवाद, ऐसा कर सकते हैं:

.red {color:red}
.blackBack {background-color: black}

लेकिन मैं अक्सर उन्हें इस तरह से जोड़कर देखता हूं:

.highlight {color:red, background-color: black}

मुझे पता है कि सिमेंटिक पुलिस आपके ऊपर होगी, लेकिन यह काम करती है।


1
मैं जोड़ूंगा: विभिन्न और अधिक अर्थ नामों का उपयोग करें। यदि ब्रांडिंग रंग बदलते हैं, तो आप बहुत सारे HTML कोड को फिर से लोड करेंगे। क्लास के नाम जैसे .primary, .secondary, .accent इत्यादि का उपयोग करें
एरिक हैम्स

2

नहीं PHP मैं डर रहा हूँ, लेकिन Zope और Plone इसे प्राप्त करने के लिए DTML नामक SASS के समान कुछ का उपयोग करते हैं। यह सीएमएस में अविश्वसनीय रूप से उपयोगी है।

Upfront Systems के पास Plone में इसके उपयोग का एक अच्छा उदाहरण है।


1

यदि आप xsl टेम्पलेट के रूप में css फ़ाइल लिखते हैं, तो आप एक साधारण xml फ़ाइल से रंग मान पढ़ सकते हैं। फिर xslt प्रोसेसर के साथ css बनाएं।

colors.xml:

<?xml version="1.0"?>
<colors>
    <background>#ccc</background>
</colors>

styles.xsl:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="text" version="1.0" encoding="iso-8859-1"/>
    <xsl:template match="/">body {
    background-color: <xsl:value-of select="/colors/background" />;
}
</xsl:template>
</xsl:stylesheet>

सीएसएस प्रस्तुत करने की कमान: xsltproc -o styles.css styles.xsl colors.xml

styles.css:

body {
    background-color: #ccc;
}

0

यह अकेले सीएसएस के साथ संभव नहीं है।

आप इसे जावास्क्रिप्ट और लेस के साथ कर सकते हैं। कम से कम .js का उपयोग करें , जो सीएसएस लाइव में लेस वेरिएबल्स को प्रस्तुत करेगा, लेकिन यह केवल विकास के लिए है और वास्तविक जीवन के उपयोग के लिए बहुत अधिक उपरि जोड़ता है।

निकटतम आप सीएसएस के साथ आ सकते हैं इस तरह से चयनकर्ता के स्थान पर एक विशेषता का उपयोग करना है :

[id*="colvar-"] {
    color: #f0c69b;
}

और idअपने सभी तत्वों के सेट करें जिन्हें आप शुरू करने वाले नामों से समायोजित करना चाहते हैं colvar-, जैसे कि colvar-header। फिर जब आप रंग बदलते हैं, तो सभी आईडी शैलियों को अपडेट किया जाता है। आप अकेले सीएसएस के साथ मिल सकते हैं।


मैं इसे अकेले सीएसएस के साथ करता हूं, यह सीएसएस चर मोज़िला-उदाहरण के साथ है
आर्थर वेबॉर्ग

यह बहुत अच्छा है अगर आपके सभी उपयोगकर्ता मोज़िला - सौभाग्य का उपयोग कर रहे हैं
user2317093

क्रोम, सफारी और ओपेरा के साथ भी काम करता है।
आर्थर वेबग

pmsl ओपी द्वारा मेरी पोस्ट में बारीक हाई स्कूल व्याकरण सुधार के साथ क्या है? यह बुरा नहीं था।
user2317093
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.