Bagaimana saya bisa mendefinisikan warna sebagai variabel dalam CSS?

Saya sedang mengerjakan file CSS yang cukup panjang. Saya tahu bahwa klien dapat meminta perubahan pada skema warna, dan bertanya-tanya: apakah mungkin untuk menetapkan warna ke variabel, sehingga saya bisa mengubah variabel agar warna baru diterapkan ke semua elemen yang menggunakannya?

Harap dicatat bahwa saya tidak dapat menggunakan PHP untuk secara dinamis mengubah file CSS.

CSS mendukung ini secara asli dengan Variabel CSS .

Contoh file CSS

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

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

Untuk contoh yang berfungsi, silakan lihat JSFiddle ini (contoh menunjukkan salah satu penyeleksi CSS dalam biola memiliki warna kode keras menjadi biru, pemilih CSS lainnya menggunakan variabel CSS, baik sintaksis asli dan saat ini, untuk mengatur warna ke biru) .

Memanipulasi variabel CSS di sisi JavaScript / klien

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

Dukungan ada di semua peramban modern

Firefox 31+ , Chrome 49+ , Safari 9.1+ , Microsoft Edge 15+ dan Opera 36+ dikirimkan dengan dukungan asli untuk variabel CSS.

Orang-orang terus memilih jawaban saya, tetapi ini adalah solusi yang mengerikan dibandingkan dengan kegembiraan sass atau kurang , terutama mengingat jumlah gui yang mudah digunakan untuk kedua hari ini. Jika Anda memiliki akal mengabaikan semua yang saya sarankan di bawah ini.

Anda bisa memberi komentar di css sebelum setiap warna untuk dijadikan semacam variabel, yang bisa Anda ubah nilainya menggunakan find / replace, jadi ...

Di bagian atas file css

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

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

*/

Kemudian di file CSS

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

Kemudian untuk, misalnya, mengubah skema warna untuk teks kotak yang Anda temukan / ganti aktif

/*bt*/#123456

CSS itu sendiri tidak menggunakan variabel. Namun, Anda dapat menggunakan bahasa lain seperti SASS untuk menentukan gaya Anda menggunakan variabel, dan secara otomatis menghasilkan file CSS, yang kemudian dapat Anda pasang di web. Perhatikan bahwa Anda harus menjalankan ulang generator setiap kali Anda membuat perubahan pada CSS Anda, tetapi itu tidak terlalu sulit.

Anda dapat mencoba variabel CSS3 :

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

Tidak ada solusi mudah CSS saja. Anda bisa melakukan ini:

• Temukan semua contoh background-colordan colordalam file CSS Anda dan buat nama kelas untuk setiap warna unik.

  .top-header { color: #fff; }
  .content-text { color: #f00; }
  .bg-leftnav { background-color: #fff; }
  .bg-column { background-color: #f00; }

• Selanjutnya, telusuri setiap halaman di situs Anda di mana warna terlibat dan tambahkan kelas yang sesuai untuk warna dan warna latar belakang.

• Terakhir, hapus referensi warna apa pun di CSS Anda selain dari kelas warna yang baru Anda buat.

Yeeeaaahhh .... sekarang Anda dapat menggunakan fungsi var ( ) di CSS .. ...

Berita baiknya adalah Anda dapat mengubahnya menggunakan akses JavaScript , yang akan berubah secara global juga ...

Tapi bagaimana cara mendeklarasikannya ...

Sederhana saja:

Misalnya, Anda ingin menetapkan a #ff0000ke var(), cukup dengan menugaskannya :root, perhatikan juga --:

:root {
    --red: #ff0000; 
}

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

Hal yang baik adalah dukungan browser tidak buruk, juga tidak perlu dikompilasi untuk digunakan di browser seperti LESSatau SASS...

Juga, berikut ini adalah skrip JavaScript sederhana, yang mengubah nilai merah menjadi biru:

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

Ruby Gem 'Kurang' untuk CSS terlihat mengagumkan.

http://lesscss.org/

Ya, dalam waktu dekat (saya menulis ini pada Juni 2012) Anda dapat mendefinisikan variabel css asli, tanpa menggunakan lebih sedikit / sass dll! Mesin Webkit baru saja menerapkan aturan variabel css pertama, sehingga versi Chrome dan Safari yang mutakhir sudah bekerja dengannya. Lihat log pengembangan Official Webkit (Chrome / Safari) dengan demo browser css di tempat.

Semoga kita dapat mengharapkan dukungan browser yang luas dari variabel css asli dalam beberapa bulan ke depan.

Jangan gunakan variabel css3 karena dukungan.

Saya akan melakukan yang berikut jika Anda ingin solusi css murni.

1. Gunakan kelas warna dengan nama semen .

   .bg-primary   { background: #880000; }
   
   .bg-secondary { background: #008800; }
   
   .bg-accent    { background: #F5F5F5; }

2. Pisahkan struktur dari kulit (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. Letakkan ini di dalam file css terpisah untuk mengubah sesuai kebutuhan.

Anda dapat melewati CSS melalui javascript dan mengganti semua instance COLOUR1 dengan warna tertentu (pada dasarnya regex) dan memberikan stylesheet cadangan jika pengguna akhir JS dimatikan

Saya tidak jelas mengapa Anda tidak bisa menggunakan PHP. Anda kemudian bisa menambahkan dan menggunakan variabel seperti yang Anda inginkan, menyimpan file sebagai file PHP dan menautkan ke file .php tersebut sebagai style sheet alih-alih file .css.

Tidak harus PHP, tetapi Anda mengerti maksud saya.

Ketika kita menginginkan hal-hal pemrograman, mengapa tidak menggunakan bahasa pemrograman sampai CSS (mungkin) mendukung hal-hal seperti variabel?

Juga, periksa CSS berorientasi Objek Nicole Sullivan .

dicejs.com (secara resmi cssobjs) adalah versi sisi klien dari SASS. Anda dapat mengatur variabel dalam CSS Anda (disimpan dalam json diformat CSS) dan menggunakan kembali variabel warna Anda.

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

Dan di sini ada tautan ke demo yang dapat diunduh lengkap yang sedikit lebih membantu daripada dokumentasinya: demo dicejs

Pertimbangkan untuk menggunakan SCSS. Ini penuh dengan sintaks CSS, jadi file CSS yang valid juga merupakan file SCSS yang valid. Ini membuat migrasi mudah, cukup ubah sufiks. Ini memiliki banyak peningkatan, variabel yang paling berguna dan penyeleksi bersarang.

Anda perlu menjalankannya melalui pra-prosesor untuk mengubahnya menjadi CSS sebelum mengirimkannya ke klien.

Saya telah menjadi pengembang CSS hardcore selama bertahun-tahun sekarang, tetapi karena memaksa diri saya untuk melakukan proyek di SCSS, saya sekarang tidak akan menggunakan yang lain.

Jika Anda memiliki Ruby di sistem Anda, Anda dapat melakukan ini:

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

Ini dibuat untuk Rails, tetapi lihat di bawah untuk cara memodifikasinya untuk menjalankannya sendiri.

Anda dapat menggunakan metode ini secara independen dari Rails, dengan menulis skrip wrapper Ruby kecil yang bekerja bersama dengan site_settings.rb dan memperhitungkan jalur-CSS Anda, dan yang dapat Anda hubungi setiap kali Anda ingin membuat ulang CSS Anda (mis. selama startup situs)

Anda dapat menjalankan Ruby di hampir semua sistem operasi, jadi ini seharusnya platform yang independen.

mis. wrapper: generate_CSS.rb (jalankan skrip ini kapan pun Anda perlu membuat CSS Anda)

#/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 )

metode generate_CSS_files di site_settings.rb perlu diubah seperti ini:

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

Anda dapat mengelompokkan pemilih:

#selector1, #selector2, #selector3 { color: black; }

Tentu bisa, semacam, berkat dunia indah dari berbagai kelas, dapat melakukan ini:

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

tapi akhirnya saya sering menggabungkan mereka seperti ini:

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

Saya tahu polisi semantik akan menguasai Anda, tetapi berhasil.

Bukan PHP Saya takut, tetapi Zope dan Plone menggunakan sesuatu yang mirip dengan SASS yang disebut DTML untuk mencapai ini. Ini sangat berguna dalam CMS.

Upfront Systems memiliki contoh penggunaannya yang baik di Plone.

Jika Anda menulis file css sebagai templat xsl, Anda bisa membaca nilai warna dari file xml sederhana. Kemudian buat css dengan prosesor 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>

Perintah untuk membuat css: xsltproc -o styles.css styles.xsl colors.xml

styles.css:

body {
    background-color: #ccc;
}

Itu tidak mungkin dengan CSS saja.

Anda dapat melakukannya dengan JavaScript dan KURANG menggunakan less.js , yang akan membuat variabel KURANG menjadi CSS hidup, tetapi itu hanya untuk pengembangan dan menambahkan terlalu banyak overhead untuk penggunaan kehidupan nyata.

Yang paling dekat dengan CSS Anda adalah dengan menggunakan pemilih substring atribut seperti ini:

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

dan atur idsemua elemen Anda yang ingin Anda sesuaikan dengan nama yang dimulai dengan colvar-, seperti colvar-header. Kemudian ketika Anda mengubah warna, semua gaya ID diperbarui. Itu sedekat yang Anda bisa dapatkan dengan CSS saja.