ฉันจะกำหนดสีเป็นตัวแปรใน CSS ได้อย่างไร


216

ฉันกำลังทำงานกับไฟล์ CSS ที่ค่อนข้างยาว ฉันรู้ว่าลูกค้าสามารถขอเปลี่ยนรูปแบบสีและสงสัยว่า: เป็นไปได้หรือไม่ที่จะกำหนดสีให้กับตัวแปรต่างๆเพื่อที่ฉันจะสามารถเปลี่ยนตัวแปรให้มีสีใหม่ที่ใช้กับองค์ประกอบทั้งหมดที่ใช้งานได้หรือไม่

โปรดทราบว่าฉันไม่สามารถใช้ PHP เพื่อเปลี่ยนไฟล์ CSS แบบไดนามิก


ซ้ำกันได้ ... stackoverflow.com/questions/47487/…
Eddie


สิ่งนี้อาจช่วยได้: stackoverflow.com/questions/15831657/…
DreamTeK

คำตอบ:


225

CSS สนับสนุนนี้กำเนิดกับตัวแปร CSS

ตัวอย่างไฟล์ CSS

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

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

สำหรับตัวอย่างการใช้งานโปรดดูJSFiddle นี้ (ตัวอย่างแสดงตัวเลือก CSS ตัวใดตัวหนึ่งในซอที่มีรหัสสีเป็นสีน้ำเงินส่วนตัวเลือก CSS อื่นใช้ตัวแปร CSS ทั้งไวยากรณ์ดั้งเดิมและปัจจุบันเพื่อตั้งค่าสีเป็นสีน้ำเงิน) .

การจัดการตัวแปร CSS ใน JavaScript / ฝั่งไคลเอ็นต์

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

การสนับสนุนอยู่ในเบราว์เซอร์ที่ทันสมัยทั้งหมด

Firefox 31+ , Chrome 49+ , Safari 9.1+ , ไมโครซอฟท์ขอบ 15 +และOpera 36+เรือที่มีการสนับสนุนพื้นเมืองสำหรับตัวแปร CSS


3
ในกรณีที่คนอื่นอ่านและพยายามทำให้มันทำงานใน Safari - การสนับสนุน CSS ดูเหมือนจะถูกลบออกจาก Webkit ในฤดูใบไม้ผลิ / ฤดูร้อน 2013. bugs.webkit.org/show_bug.cgi?id=114119 lists.webkit.org /pipermail/webkit-dev/2013-April/024476.htmlยังคงใช้งานได้ใน Chrome หลังจากเปิดใช้งานการตั้งค่าสถานะที่กล่าวถึงข้างต้น
Marie Fischer

ทดสอบกับ chrome 36 แล้วไม่สามารถใช้งานได้แม้ว่าเปิดใช้งานการตั้งค่าสถานะแล้ว ยังทำงานกับ firefox แม้ว่า
yuvi

เพิ่งตรวจสอบกับ Chrome เวอร์ชัน 49.0.2623.110 m และยังใช้งานไม่ได้
radu

ระบบปฏิบัติการของคุณคืออะไร? มันใช้งานได้สำหรับฉัน: เวอร์ชัน 49.0.2623.110 (64 บิต) บน Mac OS X
Arthur Weborg

ยังใช้งานได้กับ Chrome เวอร์ชัน Android ของฉันด้วย Android 5.1.0 Chrome 49.0.2623.105
Arthur Weborg

66

ผู้คนติดตามคำตอบของฉันมากขึ้นเรื่อย ๆ แต่มันเป็นทางออกที่น่ากลัวเมื่อเปรียบเทียบกับความสุขของเขื่องหรือน้อยโดยเฉพาะจำนวนgui ที่ใช้งานง่ายของทั้งสองวันนี้ หากคุณมีความรู้สึกใด ๆ ที่ละเว้นทุกอย่างที่ฉันแนะนำด้านล่าง

คุณสามารถใส่ความคิดเห็นใน css ก่อนแต่ละสีเพื่อใช้เป็นประเภทของตัวแปรซึ่งคุณสามารถเปลี่ยนค่าของการใช้ find / replace ดังนั้น ...

ที่ด้านบนของไฟล์ css

/********************* 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
การเพิ่มความคิดเห็นจะไม่ทำงานในบางกรณีเช่นเมื่อใช้ตัวกรอง IE ฉันไม่สามารถใส่ความคิดเห็นในที่นี่ -> ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3f5619', endColorstr = '# 77842f', GradientType = 0); / * IE6-9 * /
Carter Medlin

1
ลงคะแนนเพราะคุณพูดถูกมันเป็นวิธีที่แย่มาก
AndroidDev

ฉันชอบสไตล์คำตอบฝั่งไคลเอ็นต์ของคุณมากกว่าโซลูชันฝั่งเซิร์ฟเวอร์ดังนั้นฉันจึงทำอะไรบางอย่าง มันไม่น่าอัศจรรย์ แต่ใช้งานได้stackoverflow.com/a/44936706/4808079
Seph Reed

1
คำตอบของคุณไม่เป็นที่ยอมรับ คุณสามารถลบได้ตลอดเวลาหากคุณคิดว่ามันแย่มาก
TylerH

38

CSS เองไม่ได้ใช้ตัวแปร อย่างไรก็ตามคุณสามารถใช้ภาษาอื่นเช่นSASSเพื่อกำหนดสไตล์ของคุณโดยใช้ตัวแปรและสร้างไฟล์ CSS โดยอัตโนมัติซึ่งคุณสามารถนำขึ้นเว็บได้ โปรดทราบว่าคุณจะต้องเรียกใช้ตัวสร้างใหม่ทุกครั้งที่คุณทำการเปลี่ยนแปลง CSS ของคุณ แต่นั่นไม่ใช่เรื่องยาก


12
ฉันคิดว่าคำตอบคือตอนนี้ (2016) ไม่ถูกต้องใช่ไหม? แม้ว่าฉันคิดว่ามันอาจจะดีกว่าถ้าใช้ SASS หรืออย่างนั้น
codenoob

การใช้ CSS vars สามารถทำได้ดีกว่า SASS เนื่องจากสี SASS สามารถเปลี่ยนได้แบบคงที่เท่านั้น ด้วย CSS vars สามารถเปลี่ยนสีได้ขณะใช้งานจริงเช่นคุณสามารถเปลี่ยนเป็น "โหมดมืด" ด้วยปุ่มโดยใช้จาวาสคริปต์
Nick Crews

24

คุณสามารถลองใช้ตัวแปร CSS3 :

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

1
หมายเหตุ: คำนำหน้าคุณสมบัติที่กำหนดเองคือ var- ในข้อมูลจำเพาะก่อนหน้านี้ แต่ภายหลังเปลี่ยนเป็น - Firefox 31 ขึ้นไปทำตามข้อกำหนดใหม่ (ข้อผิดพลาด 985838) developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
tgf

20

ไม่มีวิธีแก้ปัญหา CSS อย่างง่ายเท่านั้น คุณสามารถทำสิ่งนี้:

  • ค้นหาอินสแตนซ์ทั้งหมดbackground-colorและcolorในไฟล์ CSS ของคุณและสร้างชื่อคลาสสำหรับแต่ละสีที่ไม่ซ้ำกัน

    .top-header { color: #fff; }
    .content-text { color: #f00; }
    .bg-leftnav { background-color: #fff; }
    .bg-column { background-color: #f00; }
  • ถัดไปผ่านทุกหน้าในไซต์ของคุณที่มีสีเกี่ยวข้องและเพิ่มคลาสที่เหมาะสมสำหรับทั้งสีและสีพื้นหลัง

  • ขั้นสุดท้ายให้ลบการอ้างอิงสีใด ๆ ใน CSS ของคุณนอกเหนือจากคลาสสีที่สร้างขึ้นใหม่


1
แต่ถ้าลูกค้าตัดสินใจว่าพวกเขาต้องการทำให้องค์ประกอบสีแดงทั้งหมดเป็นสีเขียว คุณต้องเปลี่ยนคลาส "สีแดง" เพื่อให้ "สี: สีเขียว" ซึ่งทำให้เกิดความสับสนและยากที่จะรักษา
singwolfboy

@singingwolfboy ฉันควรจะเจาะจงมากขึ้นในการตั้งชื่อชั้นเรียน เป็นการง่ายที่สุดในการอ้างอิงองค์ประกอบที่เกี่ยวข้องเพื่อให้คุณสามารถแก้ไขได้อย่างง่ายดายในอนาคต
Corey Ballou

8
@downvoters นี้เป็นCSS เฉพาะการแก้ปัญหา มีทางเลือกมากมายที่เกี่ยวข้องกับการเขียนสคริปต์หรือ CLI สำหรับคนทั่วไปไม่ได้ตั้งใจในการทำเช่นนั้น
Corey Ballou

17

Yeeeaaahhh .... ตอนนี้คุณสามารถใช้ฟังก์ชั่นvar ( ) ในCSS .. ...

ข่าวดีก็คือคุณสามารถเปลี่ยนได้โดยใช้การเข้าถึงJavaScriptซึ่งจะเปลี่ยนไปทั่วโลกเช่นกัน ...

แต่จะประกาศอย่างไร ...

มันค่อนข้างง่าย:

ตัวอย่างเช่นคุณต้องการมอบหมายให้#ff0000กับ a var()เพียงแค่กำหนดมัน:rootและให้ความสนใจกับ--:

:root {
    --red: #ff0000; 
}

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

สิ่งที่ดีคือการสนับสนุนเบราว์เซอร์ไม่เลวยังไม่จำเป็นต้องรวบรวมเพื่อใช้ในเบราว์เซอร์เช่นLESSหรือSASS...

การสนับสนุนเบราว์เซอร์

และนี่คือสคริปต์ JavaScript แบบง่ายซึ่งจะเปลี่ยนค่าสีแดงเป็นสีน้ำเงิน:

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

9

Ruby 'CSS' น้อยลงสำหรับ CSS ดูยอดเยี่ยม

http://lesscss.org/


2
ฉันคิดว่าความงามของ LESS คือมันไม่ใช่ Ruby หรือกรอบเฉพาะ มันสามารถ 'รวบรวม' ด้านลูกค้าหรือใช้กับกรอบอื่น ๆ เช่น django-css github.com/dziegler/django-cssหรืออะไร
xster

9

ใช่ในอนาคตอันใกล้ (ฉันเขียนสิ่งนี้ในเดือนมิถุนายน 2012) คุณสามารถกำหนดตัวแปร css ดั้งเดิมโดยไม่ต้องใช้น้อย / sass ฯลฯ ! เอ็นจิ้น Webkit เพิ่งใช้กฎตัวแปร css แรกดังนั้น Chrome และ Safari เวอร์ชันล้ำสมัยจึงสามารถใช้งานได้ ดูบันทึกการพัฒนาอย่างเป็นทางการของ Webkit (Chrome / Safari)ด้วยการสาธิตเบราว์เซอร์ css ในสถานที่

หวังว่าเราสามารถคาดหวังการสนับสนุนเบราว์เซอร์อย่างกว้างขวางของตัวแปร css ในอีกไม่กี่เดือนข้างหน้า


2

4

อย่าใช้ตัวแปร css3 เนื่องจากรองรับ

ฉันจะทำต่อไปนี้หากคุณต้องการโซลูชัน CSS บริสุทธิ์

  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. วางสิ่งเหล่านี้ไว้ในไฟล์ css แยกต่างหากเพื่อเปลี่ยนตามต้องการ


3

คุณสามารถส่ง CSS ผ่าน javascript และแทนที่อินสแตนซ์ทั้งหมดของ COLOUR1 ด้วยสีที่แน่นอน (โดยทั่วไปจะ regex) และให้สไตล์ชีทสำรองในกรณีที่ผู้ใช้ปิด JS


3

ฉันไม่ชัดเจนว่าทำไมคุณไม่สามารถใช้ PHP จากนั้นคุณสามารถเพิ่มและใช้ตัวแปรตามที่คุณต้องการบันทึกไฟล์เป็นไฟล์ PHP และเชื่อมโยงไปยังไฟล์. php นั้นเป็นสไตล์ชีทแทนที่จะเป็นไฟล์. css

ไม่จำเป็นต้องเป็น PHP แต่คุณเข้าใจในสิ่งที่ฉันหมายถึง

เมื่อเราต้องการเนื้อหาการเขียนโปรแกรมทำไมไม่ใช้ภาษาการเขียนโปรแกรมจนกว่า CSS (อาจจะ) สนับสนุนสิ่งต่าง ๆ เช่นตัวแปร?

นอกจากนี้ตรวจสอบนิโคลซัลลิแวนCSS เชิงวัตถุ


เราทุกคนไม่สามารถใช้ PHP เพราะงานนี้ไม่ต้องการให้เราทำ
horiatu

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 demo


เครื่องมือนี้ดูเหมือนจะไม่สามารถใช้งานได้อีกต่อไปในปี 2014
Daniel

3

พิจารณาใช้ SCSS มันเข้ากันได้กับไวยากรณ์ CSS อย่างสมบูรณ์ดังนั้นไฟล์ CSS ที่ถูกต้องจึงเป็นไฟล์ SCSS ที่ถูกต้อง สิ่งนี้ทำให้การโยกย้ายง่ายเพียงแค่เปลี่ยนคำต่อท้าย มันมีการปรับปรุงมากมายตัวแปรที่มีประโยชน์ที่สุดและตัวเลือกซ้อนกัน

คุณต้องเรียกใช้ผ่านตัวประมวลผลล่วงหน้าเพื่อแปลงเป็น CSS ก่อนที่จะส่งไปยังไคลเอนต์

ฉันเป็นนักพัฒนา CSS ไม่ยอมใครง่ายๆมาหลายปีแล้ว แต่เนื่องจากบังคับให้ฉันทำโครงการใน SCSS ฉันจะไม่ใช้สิ่งอื่นเลย


2

หากคุณมี Ruby ในระบบของคุณคุณสามารถทำได้:

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

สิ่งนี้ถูกสร้างขึ้นสำหรับ Rails แต่ดูด้านล่างสำหรับวิธีการแก้ไขเพื่อให้ทำงานได้อย่างอิสระ

คุณสามารถใช้วิธีนี้ได้อย่างอิสระจาก Rails โดยการเขียนสคริปต์ Ruby wrapper ขนาดเล็กซึ่งทำงานร่วมกับ site_settings.rb และนำ CSS-path ของคุณไปใช้และคุณสามารถโทรได้ทุกครั้งที่คุณต้องการสร้าง CSS ขึ้นมาใหม่ (เช่น ระหว่างการเริ่มต้นไซต์)

คุณสามารถรัน Ruby บนระบบปฏิบัติการใด ๆ ก็ได้ดังนั้นนี่ควรเป็นแพลตฟอร์มที่ค่อนข้างอิสระ

เช่น wrapper: 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 )

วิธี generate_CSS_files ในsite_settings.rbต้องแก้ไขดังนี้:

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, .econdary, .accent เป็นต้น
Eric Harms

2

ไม่ใช่ PHP ฉันกลัว แต่ Zope และ Plone ใช้สิ่งที่คล้ายกับ SASS ที่เรียกว่าDTMLเพื่อให้บรรลุเป้าหมายนี้ มันมีประโยชน์อย่างเหลือเชื่อใน CMS

ระบบตรงไปตรงมาเป็นตัวอย่างที่ดีของการใช้ใน Plone


1

หากคุณเขียนไฟล์ css เป็นเทมเพลต xsl คุณสามารถอ่านค่าสีจากไฟล์ xml แบบง่าย จากนั้นสร้าง css ด้วยตัวประมวลผล xslt

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>

คำสั่งเพื่อแสดง css: xsltproc -o styles.css styles.xsl colors.xml

styles.css:

body {
    background-color: #ccc;
}

0

ไม่สามารถทำได้ด้วย CSS เพียงอย่างเดียว

คุณสามารถทำได้ด้วย JavaScript และLESSโดยใช้less.jsซึ่งจะแสดงตัวแปร LESS ลงใน CSS live แต่เป็นการพัฒนาเท่านั้นและเพิ่มค่าใช้จ่ายมากเกินไปสำหรับการใช้งานในชีวิตจริง

สิ่งที่ใกล้เคียงกับ CSS มากที่สุดคือใช้ตัวเลือก substring selectorดังนี้:

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

และการตั้งค่าidขององค์ประกอบของคุณทั้งหมดที่คุณต้องการที่จะปรับเปลี่ยนชื่อเริ่มต้นด้วยเช่นcolvar- colvar-headerจากนั้นเมื่อคุณเปลี่ยนสีสไตล์ ID ทั้งหมดจะได้รับการอัปเดต ใกล้เคียงที่สุดเท่าที่คุณจะทำได้ด้วย CSS เพียงอย่างเดียว


ฉันทำด้วย CSS เพียงอย่างเดียวมันมีตัวแปร css Mozilla
อาร์เธอร์ Weborg

ดีมากถ้าผู้ใช้ของคุณกำลังใช้ mozilla - โชคดีกับสิ่งนั้น
user2317093

ใช้ได้กับโครเมียมซาฟารีและโอเปร่าเช่นกัน
Arthur Weborg

pmsl มีการแก้ไขไวยากรณ์โรงเรียนมัธยมที่พิถีพิถันในโพสต์ของฉันโดย OP คืออะไร? มันไม่ได้เลวร้ายขนาดนั้น
user2317093
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.