Làm cách nào để xác định màu sắc như các biến trong CSS?


216

Tôi đang làm việc trên một tệp CSS khá dài. Tôi biết rằng khách hàng có thể yêu cầu thay đổi bảng màu và tự hỏi: có thể gán màu cho các biến không, để tôi có thể thay đổi một biến để áp dụng màu mới cho tất cả các thành phần sử dụng nó?

Xin lưu ý rằng tôi không thể sử dụng PHP để tự động thay đổi tệp CSS.


Có thể nhân đôi ... stackoverflow.com/questions/47487/ Kẻ
Eddie


Điều này có thể giúp: stackoverflow.com/questions/15831657/
Kẻ

Câu trả lời:


225

CSS hỗ trợ điều này tự nhiên với các biến CSS .

Ví dụ tệp CSS

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

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

Để biết ví dụ hoạt động, vui lòng xem JSFiddle này (ví dụ hiển thị một trong các bộ chọn CSS trong fiddle có màu cứng được mã hóa thành màu xanh, bộ chọn CSS khác sử dụng các biến CSS, cả cú pháp gốc và hiện tại, để đặt màu thành màu xanh) .

Thao tác một biến CSS trong JavaScript / phía máy khách

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

Hỗ trợ có trong tất cả các trình duyệt hiện đại

Firefox 31+ , Chrome 49+ , Safari 9.1+ , Microsoft Edge 15+Opera 36+ có hỗ trợ riêng cho các biến CSS.


3
Chỉ trong trường hợp bất kỳ ai khác đọc được điều này và cố gắng để nó hoạt động trong Safari - hỗ trợ cho CSS dường như đã bị xóa khỏi Webkit vào mùa xuân / hè 2013. bug.webkit.org/show_orms.cgi?id=114119 List.webkit.org /pipermail/webkit-dev/2013-April/024476.html Vẫn hoạt động trong Chrome sau khi bật cờ được đề cập ở trên.
Marie Fischer

Đã thử nghiệm trên chrome 36, không hoạt động ngay cả khi bật cờ. Vẫn hoạt động với firefox
yuvi

Chỉ cần kiểm tra nó với Chrome Phiên bản 49.0.2623.110 m và nó vẫn không hoạt động.
radu

HĐH của bạn là gì? Nó hoạt động với tôi: Phiên bản 49.0.2623.110 (64-bit) trên Mac OS X
Arthur Weborg

Cũng hoạt động trên phiên bản Chrome Android Android 5.1.0 Chrome 49.0.2623.105
Arthur Weborg

66

Mọi người tiếp tục ủng hộ câu trả lời của tôi, nhưng đó là một giải pháp khủng khiếp so với niềm vui của sass hoặc ít hơn , đặc biệt là với số lượng người dễ sử dụng cho cả hai ngày nay. Nếu bạn có bất kỳ ý nghĩa bỏ qua tất cả mọi thứ tôi đề nghị dưới đây.

Bạn có thể đặt một nhận xét trong css trước mỗi màu để đóng vai trò là một loại biến, bạn có thể thay đổi giá trị của việc sử dụng find / thay thế, vì vậy ...

Ở đầu tập tin css

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

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

*/

Sau đó trong tệp CSS

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

Sau đó, ví dụ, thay đổi bảng màu cho văn bản hộp bạn thực hiện tìm / thay thế trên

/*bt*/#123456

3
Thêm ý kiến ​​sẽ không hoạt động trong một vài trường hợp, như khi sử dụng bộ lọc IE. Tôi không thể đưa ý kiến ​​vào đây -> bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3f5619', endColorstr = '# 77842f', GradientType = 0); / * IE6-9 * /
Carter Medlin

1
Bị từ chối vì bạn đúng, đó là một giải pháp tồi tệ.
AndroidDev

Cá nhân tôi thích kiểu trả lời phía máy khách của bạn hơn các giải pháp phía máy chủ, vì vậy tôi đã làm một cái gì đó để làm điều đó. Nó không tuyệt vời, nhưng nó hoạt động stackoverflow.com/a/44936706/4808079
Seph Reed

1
Câu trả lời của bạn không được chấp nhận. Bạn luôn có thể xóa nó nếu bạn nghĩ nó khủng khiếp.
TylerH

38

Bản thân CSS không sử dụng biến. Tuy nhiên, bạn có thể sử dụng một ngôn ngữ khác như SASS để xác định kiểu dáng của mình bằng các biến và tự động tạo các tệp CSS, sau đó bạn có thể đưa lên web. Lưu ý rằng bạn sẽ phải chạy lại trình tạo mỗi lần thay đổi CSS, nhưng điều đó không quá khó.


12
Tôi nghĩ rằng câu trả lời là NGAY BÂY GIỜ (2016), phải không? Mặc dù tôi nghĩ rằng vẫn có thể tốt hơn để sử dụng SASS hoặc như vậy.
codenoob

Sử dụng các lọ CSS có thể thích hợp hơn với SASS vì với màu SASS chỉ có thể được thay đổi tĩnh. Với màu vars CSS có thể được thay đổi trong thời gian chạy, tức là bạn có thể chuyển sang "chế độ tối" bằng một nút sử dụng javascript.
Nick phi hành đoàn


20

Không có giải pháp CSS đơn giản nào. Bạn có thể làm điều này:

  • Tìm tất cả các phiên bản background-colorcolortrong tệp CSS của bạn và tạo một tên lớp cho mỗi màu duy nhất.

    .top-header { color: #fff; }
    .content-text { color: #f00; }
    .bg-leftnav { background-color: #fff; }
    .bg-column { background-color: #f00; }
  • Tiếp theo đi qua từng trang trên trang web của bạn, nơi màu sắc được tham gia và thêm các lớp thích hợp cho cả màu và màu nền.

  • Cuối cùng, xóa mọi tham chiếu màu trong CSS của bạn ngoài các lớp màu mới tạo.


1
Nhưng điều gì sẽ xảy ra nếu khách hàng quyết định rằng họ muốn làm cho tất cả các yếu tố màu đỏ thành màu xanh lá cây? Bạn sẽ phải thay đổi lớp "đỏ" để cung cấp "màu: xanh", điều này gây nhầm lẫn và khó duy trì.
singwolfboy

@sellingwolfboy, tôi nên nói cụ thể hơn về cách đặt tên của các lớp. Dễ dàng nhất để tham khảo (các) yếu tố nào họ đang liên quan để bạn có thể dễ dàng sửa đổi chúng trong tương lai.
Corey Ballou

8
@downvoters, đây là giải pháp CHỈ CSS . Có rất nhiều giải pháp thay thế liên quan đến kịch bản hoặc CLI, đây là giải pháp dành cho những người không có ý định làm như vậy .
Corey Ballou

17

Yeeeaaahhh .... bây giờ bạn có thể sử dụng hàm var ( ) trong CSS .. ...

Tin vui là bạn có thể thay đổi nó bằng cách sử dụng quyền truy cập JavaScript , điều này cũng sẽ thay đổi trên toàn cầu ...

Nhưng làm thế nào để khai báo chúng ...

Nó khá đơn giản:

Ví dụ: bạn muốn gán a #ff0000cho a var(), chỉ cần gán nó vào :root, cũng chú ý đến --:

:root {
    --red: #ff0000; 
}

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

Điều tốt là hỗ trợ trình duyệt không tệ, cũng không cần phải biên dịch để được sử dụng trong trình duyệt như LESShoặc SASS...

hỗ trợ trình duyệt

Ngoài ra, đây là một tập lệnh JavaScript đơn giản, thay đổi giá trị màu đỏ thành màu xanh:

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

9

Ruby Gem 'Ít' cho CSS trông tuyệt vời.

http://lesscss.org/


2
Tôi nghĩ cái hay của LESS là nó không phải là Ruby hay bất kỳ khung cụ thể nào. Nó có thể được 'biên dịch' phía máy khách hoặc được sử dụng với bất kỳ khung nào khác như django-css github.com/dziegler/django-css hoặc một cái gì đó
xster

9

Có, trong tương lai gần (tôi viết bài này vào tháng 6 năm 2012), bạn có thể xác định các biến css riêng, mà không cần sử dụng ít / sass, v.v. Công cụ Webkit chỉ thực hiện các quy tắc biến css đầu tiên, do đó, các phiên bản tiên tiến của Chrome và Safari đã hoạt động với chúng. Xem nhật ký phát triển Official Webkit (Chrome / Safari) với bản demo trình duyệt css tại chỗ.

Hy vọng chúng ta có thể mong đợi sự hỗ trợ rộng rãi của trình duyệt về các biến css riêng trong vài tháng tới.


2
@Daniel Thực hiện năm 2015
Still.Tony

4

Không sử dụng biến css3 do hỗ trợ.

Tôi sẽ làm như sau nếu bạn muốn một giải pháp css thuần túy.

  1. Sử dụng các lớp màu với semenatic tên.

    .bg-primary   { background: #880000; }
    
    .bg-secondary { background: #008800; }
    
    .bg-accent    { background: #F5F5F5; }
  2. Tách cấu trúc khỏi da (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. Đặt chúng trong một tập tin css riêng để thay đổi khi cần thiết.


3

Bạn có thể chuyển CSS thông qua javascript và thay thế tất cả các phiên bản của COLOUR1 bằng một màu nhất định (về cơ bản là regex nó) và cung cấp một bản định kiểu sao lưu trong trường hợp người dùng cuối đã tắt JS


3

Tôi không rõ tại sao bạn không thể sử dụng PHP. Sau đó, bạn có thể chỉ cần thêm và sử dụng các biến như bạn muốn, lưu tệp dưới dạng tệp PHP và liên kết đến tệp .php đó dưới dạng biểu định kiểu thay vì tệp .css.

Nó không phải là PHP, nhưng bạn hiểu ý tôi.

Khi chúng ta muốn công cụ lập trình, tại sao không sử dụng ngôn ngữ lập trình cho đến khi CSS (có thể) hỗ trợ những thứ như biến?

Ngoài ra, hãy xem CSS hướng đối tượng của Nicole Sullivan .


Tất cả chúng ta không thể sử dụng PHP vì công việc yêu cầu một số người trong chúng ta không làm!
horiatu

3

dicejs.com (chính thức là cssobjs) là phiên bản phía máy khách của SASS. Bạn có thể đặt các biến trong CSS của mình (được lưu trữ trong CSS định dạng json) và sử dụng lại các biến màu của bạn.

//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();

Và đây là một liên kết đến một bản demo có thể tải xuống hoàn chỉnh, hữu ích hơn một chút sau đó là tài liệu của họ: bản demo dicejs


Công cụ này dường như không còn khả dụng trong năm 2014
Daniel

3

Cân nhắc sử dụng SCSS. Nó hoàn toàn tương thích với cú pháp CSS, do đó, tệp CSS hợp lệ cũng là tệp SCSS hợp lệ. Điều này làm cho việc di chuyển dễ dàng, chỉ cần thay đổi hậu tố. Nó có nhiều cải tiến, hữu ích nhất là các biến và các bộ chọn lồng nhau.

Bạn cần chạy nó thông qua bộ xử lý trước để chuyển đổi nó thành CSS trước khi chuyển nó đến máy khách.

Tôi đã là một nhà phát triển CSS khó tính trong nhiều năm nay, nhưng kể từ khi buộc bản thân phải thực hiện một dự án trong SCSS, bây giờ tôi sẽ không sử dụng bất cứ thứ gì khác.


2

Nếu bạn có Ruby trên hệ thống của mình, bạn có thể làm điều này:

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

Điều này được tạo ra cho Rails, nhưng xem bên dưới để biết cách sửa đổi nó để chạy độc lập.

Bạn có thể sử dụng phương pháp này một cách độc lập với Rails, bằng cách viết một tập lệnh trình bao bọc Ruby nhỏ hoạt động cùng với site_sinstall.rb và đưa các đường dẫn CSS của bạn vào tài khoản và bạn có thể gọi mỗi khi bạn muốn tạo lại CSS của mình (ví dụ: trong quá trình khởi động trang web)

Bạn có thể chạy Ruby trên hầu hết mọi hệ điều hành, vì vậy đây phải là nền tảng khá độc lập.

ví dụ: trình bao bọc: created_CSS.rb (chạy tập lệnh này bất cứ khi nào bạn cần tạo 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 )

phương thức Gener_CSS_files trong site_sinstall.rb sau đó cần được sửa đổi như thế này:

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

Chắc chắn, có thể, nhờ vào thế giới tuyệt vời của nhiều lớp, có thể làm điều này:

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

nhưng cuối cùng tôi thường kết hợp chúng như thế này:

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

Tôi biết cảnh sát ngữ nghĩa sẽ là tất cả của bạn, nhưng nó hoạt động.


1
Tôi sẽ thêm: sử dụng các tên ngữ nghĩa khác nhau và nhiều hơn. Nếu màu sắc thương hiệu thay đổi, bạn sẽ làm lại rất nhiều mã html. Sử dụng các tên lớp như .primary, .secondary, .accent, v.v.
Eric Harms

2

Không phải PHP tôi sợ, nhưng Zope và Plone sử dụng thứ tương tự SASS gọi là DTML để đạt được điều này. Nó cực kỳ hữu ích trong CMS.

Upfront Systems có một ví dụ điển hình về việc sử dụng nó trong Plone.


1

Nếu bạn viết tệp css dưới dạng mẫu xsl, bạn có thể đọc các giá trị màu từ tệp xml đơn giản. Sau đó tạo css với bộ xử lý xslt.

màu sắc:

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

kiểu.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>

Lệnh kết xuất css: xsltproc -o styles.css styles.xsl colors.xml

style.css:

body {
    background-color: #ccc;
}

0

Không thể với CSS một mình.

Bạn có thể làm điều đó với JavaScript và LESS bằng cách sử dụng less.js , điều này sẽ biến các biến LESS thành CSS trực tiếp, nhưng nó chỉ để phát triển và thêm quá nhiều chi phí cho việc sử dụng thực tế.

Cách gần nhất mà bạn có thể đi kèm với CSS là sử dụng bộ chọn chuỗi con thuộc tính như thế này:

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

và đặt ids của tất cả các thành phần mà bạn muốn điều chỉnh thành tên bắt đầu bằng colvar-, chẳng hạn như colvar-header. Sau đó, khi bạn thay đổi màu sắc, tất cả các kiểu ID được cập nhật. Đó là gần như bạn có thể nhận được với CSS một mình.


Tôi làm điều đó chỉ với CSS, đó là với các biến css Ví dụ Mozilla
Arthur Weborg

thật tuyệt nếu tất cả người dùng của bạn đang sử dụng mozilla - chúc may mắn với điều đó
user2317093

Hoạt động với chrome, safari, và opera là tốt.
Arthur Weborg

pmsl những gì với sửa chữa ngữ pháp trường trung học khó khăn trong bài viết của tôi bởi OP? Nó không tệ đến thế đâu.
user2317093
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.