Bagaimana saya bisa mendefinisikan warna sebagai variabel dalam CSS?


216

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.




Jawaban:


225

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.


3
Kalau-kalau ada orang lain yang membaca ini dan mencoba membuatnya bekerja di Safari - dukungan untuk CSS tampaknya telah dihapus dari Webkit pada musim semi / musim panas 2013. bugs.webkit.org/show_bug.cgi?id=114119 lists.webkit.org /pipermail/webkit-dev/2013-April/024476.html Masih berfungsi di Chrome setelah mengaktifkan bendera yang disebutkan di atas.
Marie Fischer

Diuji pada chrome 36, tidak berfungsi meskipun bendera diaktifkan. Masih bekerja dengan firefox
yuvi

Cukup periksa dengan Versi Chrome 49.0.2623.110 m dan masih tidak berfungsi.
Radu

Apa OS kamu? Ini bekerja untuk saya: Versi 49.0.2623.110 (64-bit) pada Mac OS X
Arthur Weborg

Juga bekerja di Android Chrome Versi Android Android 5.1.0 Chrome 49.0.2623.105
Arthur Weborg

66

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

3
Menambahkan komentar tidak akan berfungsi dalam beberapa kasus, seperti saat menggunakan filter IE. Saya tidak dapat memberikan komentar di sini -> filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3f5619', endColorstr = '# 77842f', GradientType = 0); / * IE6-9 * /
Carter Medlin

1
Diremehkan karena Anda benar, ini solusi yang mengerikan.
AndroidDev

Saya pribadi lebih suka gaya jawaban sisi klien Anda daripada solusi sisi server, jadi saya membuat sesuatu untuk melakukannya. Ini tidak luar biasa, tetapi ia bekerja dengan stackoverflow.com/a/44936706/4808079
Seph Reed

1
Jawaban Anda tidak diterima. Anda selalu dapat menghapusnya jika Anda pikir itu mengerikan.
TylerH

38

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.


12
Saya pikir jawabannya SEKARANG (2016) salah, bukan? Meskipun saya pikir masih lebih baik menggunakan SASS atau semacamnya.
codenoob

Menggunakan vars CSS dapat lebih disukai daripada SASS karena dengan warna SASS hanya dapat diubah secara statis. Dengan vars warna CSS dapat diubah saat runtime, yaitu Anda dapat beralih ke "mode gelap" dengan tombol menggunakan javascript.
Nick Crews


20

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.


1
Tetapi bagaimana jika klien memutuskan bahwa mereka ingin membuat semua elemen merah berwarna hijau? Anda harus mengubah kelas "merah" untuk memberikan "warna: hijau", yang menjadi membingungkan dan sulit dipertahankan.
singingwolfboy

@singingwolfboy, saya seharusnya lebih spesifik dalam penamaan kelas. Cara termudah untuk mereferensikan elemen apa yang terkait sehingga Anda dapat dengan mudah memodifikasinya di masa mendatang.
Corey Ballou

8
@ downvoters, ini adalah solusi HANYA CSS . Ada banyak solusi alternatif yang melibatkan scripting atau CLI, ini untuk orang-orang yang tidak bermaksud melakukannya .
Corey Ballou

17

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...

dukungan browser

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

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


9

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.


2
@Daniel Make that 2015
Still.Tony

4

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.


3

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


3

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 .


Kita semua tidak dapat menggunakan PHP karena pekerjaan itu mengharuskan sebagian dari kita untuk tidak melakukannya!
horiatu

3

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


Alat ini tampaknya tidak tersedia lagi pada tahun 2014
Daniel

3

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.


2

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

2

Anda dapat mengelompokkan pemilih:

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

2

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.


1
Saya akan menambahkan: menggunakan nama semantik yang berbeda dan lebih. Jika warna branding berubah Anda akan mengulang banyak kode html. Gunakan nama kelas seperti .primary, .secondary, .accent, dll.
Eric Harms

2

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.


1

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;
}

0

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.


Saya melakukannya dengan CSS saja, ini dengan variabel css Mozilla-example
Arthur Weborg

itu bagus jika semua pengguna Anda menggunakan mozilla - semoga berhasil dengan itu
user2317093

Bekerja dengan chrome, safari, dan opera juga.
Arthur Weborg

pmsl ada apa dengan koreksi tata bahasa sekolah menengah atas yang rewel di pos saya oleh OP? Itu tidak terlalu buruk.
user2317093
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.