Renkleri CSS'de değişken olarak nasıl tanımlayabilirim?


216

Oldukça uzun bir CSS dosyası üzerinde çalışıyorum. İstemcinin renk şemasında değişiklik isteyebileceğini biliyorum ve merak ediyordum: Değişkenlere renk atamak mümkün mü, böylece yeni rengi kullanan tüm öğelere uygulanacak bir değişkeni değiştirebilir miyim?

CSS dosyasını dinamik olarak değiştirmek için PHP kullanamayacağımı lütfen unutmayın.




Yanıtlar:


225

CSS bunu yerel olarak CSS Değişkenleri ile destekler .

Örnek CSS dosyası

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

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

Çalışan bir örnek için lütfen bu JSFiddle'a bakın (örnek, kemandaki CSS seçicilerinden birinin maviye kodlanmış rengi olduğunu gösterir, diğer CSS seçici, rengi maviye ayarlamak için hem orijinal hem de geçerli sözdizimi olan CSS değişkenlerini kullanır) .

JavaScript / istemci tarafında bir CSS değişkenini değiştirme

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

Tüm modern tarayıcılarda destek

Firefox 31+ , Chrome 49+ , Safari 9.1+ , Microsoft Edge 15+ ve Opera 36+ CSS değişkenleri için yerel destek sunar.


3
Başka birinin bunu okuması ve Safari'de çalışmaya çalışması durumunda - CSS desteği ilkbahar / yaz 2013'te Webkit'ten kaldırılmış gibi görünüyor. Bugs.webkit.org/show_bug.cgi?id=114119 lists.webkit.org /pipermail/webkit-dev/2013-April/024476.html Yukarıda belirtilen bayrak etkinleştirildikten sonra Chrome'da hala çalışıyor.
Marie Fischer

Krom 36'da test edildi, işaret etkinken bile çalışmıyor. Yine de firefox ile çalışıyor
yuvi

Chrome 49.0.2623.110 m Sürümü ile kontrol ettiniz ve hala çalışmıyor.
radu

İşletim sisteminiz nedir? Benim için çalıştı: Mac OS X'de Sürüm 49.0.2623.110 (64 bit)
Arthur Weborg

Ayrıca benim android Chrome Sürüm Android 5.1.0 Chrome üzerinde çalıştı 49.0.2623.105
Arthur Weborg

66

İnsanlar cevabımı yükseltmeye devam ediyor, ancak özellikle bu iki gün için kullanımı kolay gui sayısı göz önüne alındığında, sass veya daha az sevinçle karşılaştırıldığında korkunç bir çözüm . Herhangi bir duygunuz varsa, aşağıda önerdiğim her şeyi göz ardı edin.

Bul / değiştir özelliğini kullanarak değerini değiştirebileceğiniz bir çeşit değişken olarak hizmet etmek için her renkten önce css'e bir yorum ekleyebilirsiniz.

Css dosyasının üst kısmında

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

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

*/

Daha sonra CSS dosyasında

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

Ardından, örneğin, bul / değiştir yaptığınız kutu metninin renk düzenini değiştirmek için

/*bt*/#123456

3
Yorum eklemek, IE filtrelerini kullanırken olduğu gibi birkaç durumda çalışmaz. Buraya yorum ekleyemiyorum -> filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3f5619', endColorstr = '# 77842f', GradientType = 0); / * IE6-9 * /
Carter Medlin

1
Haklısın, çünkü haklısın, bu korkunç bir çözüm.
AndroidDev

Ben şahsen sunucu tarafı çözümleri yerine müşteri tarafı cevap tarzı tercih, bu yüzden bunu yapmak için bir şey yaptım. Şaşırtıcı değil, ama çalışıyor stackoverflow.com/a/44936706/4808079
Seph Reed

1
Cevabınız kabul edilmedi. Korkunç olduğunu düşünüyorsanız her zaman silebilirsiniz.
TylerH

38

CSS'nin kendisi değişken kullanmaz. Bununla birlikte, değişkenlerinizi kullanarak stilinizi tanımlamak için SASS gibi başka bir dil kullanabilir ve daha sonra web'e koyabileceğiniz otomatik olarak CSS dosyaları oluşturabilirsiniz. CSS'nizde her değişiklik yaptığınızda jeneratörü yeniden çalıştırmanız gerektiğini unutmayın, ancak bu çok zor değil.


12
Cevabın ŞİMDİ (2016) yanlış olduğunu düşünüyorum, değil mi? Yine de SASS veya daha fazlasını kullanmak daha iyi olabilir.
codenoob

SASS renkleri ile sadece statik olarak değiştirilebildiğinden CSS değişkenlerinin kullanılması SASS için tercih edilebilir. CSS vars ile renkler çalışma zamanında değiştirilebilir, yani javascript kullanarak bir düğme ile "karanlık moda" geçebilirsiniz.
Nick Crews


20

Yalnızca kolay CSS çözümü yoktur. Bunu yapabilirsin:

  • CSS dosyanızdaki background-colorve coloriçindeki tüm örnekleri bulun ve her benzersiz renk için bir sınıf adı oluşturun.

    .top-header { color: #fff; }
    .content-text { color: #f00; }
    .bg-leftnav { background-color: #fff; }
    .bg-column { background-color: #f00; }
  • Ardından, sitenizdeki rengin dahil olduğu her sayfayı inceleyin ve hem renk hem de arka plan rengi için uygun sınıfları ekleyin.

  • Son olarak, CSS'nizde yeni oluşturulan renk sınıflarınız dışındaki renk referanslarını kaldırın.


1
Peki ya müşteri tüm kırmızı unsurları yeşil yapmak istediğine karar verirse? Kafa karıştırıcı ve bakımı zor olan "renk: yeşil" sağlamak için "kırmızı" sınıfı değiştirmeniz gerekir.
singingwolfboy

@singingwolfboy, sınıfların isimlendirilmesinde daha spesifik olmalıydım. Gelecekte kolayca değiştirebilmeniz için hangi öğelere ait olduklarına başvurmak en kolay yoldur.
Corey Ballou

8
@downvoters, bu SADECE bir CSS çözümüdür. Komut dosyası veya CLI içeren çok sayıda alternatif çözüm var, bu bunu yapmak istemeyen insanlar içindir .
Corey Ballou

17

Yeeeaaahhh .... artık CSS'de var ( ) fonksiyonunu kullanabilirsiniz .. ...

İyi haber şu ki, küresel olarak da değişecek olan JavaScript erişimini kullanarak değiştirebilirsiniz ...

Ama nasıl ilan edilir ...

Oldukça basit:

Örneğin, bir atamak istiyorum #ff0000a var()sadece basitçe atamak, :rootaynı zamanda dikkat, --:

:root {
    --red: #ff0000; 
}

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

Tarayıcı desteği kötü değil, aynı zamanda tarayıcıda kullanılmak üzere derlenmesine gerek yok LESSya da SASS...

tarayıcı desteği

Ayrıca, kırmızı değeri maviye dönüştüren basit bir JavaScript betiği:

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


9

Evet, yakın gelecekte (bunu Haziran 2012'de yazıyorum) daha az / sass vb kullanmadan yerel css değişkenlerini tanımlayabilirsiniz! Webkit motoru ilk css değişken kurallarını uyguladı, bu nedenle Chrome ve Safari'nin son sürümleri zaten onlarla birlikte çalışıyor. Bkz Resmi Webkit (Krom / Safari) geliştirme günlüğü bir yerinde css tarayıcı demo ile.

Umarım önümüzdeki birkaç ay içinde yerel css değişkenlerinin yaygın tarayıcı desteğini bekleyebiliriz.


2
@Daniel Yap 2015
Still.Tony

4

Destek nedeniyle css3 değişkenlerini kullanmayın.

Saf bir css çözümü istiyorsanız aşağıdakileri yaparım.

  1. Semenatik adlara sahip renk sınıfları kullanın .

    .bg-primary   { background: #880000; }
    
    .bg-secondary { background: #008800; }
    
    .bg-accent    { background: #F5F5F5; }
  2. Yapıyı deriden ayırın (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. Gerektiğinde değiştirmek için bunları ayrı bir css dosyasına yerleştirin.


3

CSS'yi javascript üzerinden geçirebilir ve tüm COLOUR1 örneklerini belirli bir renkle (temel olarak regex) değiştirebilir ve son kullanıcının JS kapalı olması durumunda bir yedek stil sayfası sağlayabilirsiniz


3

Neden PHP kullanamayacağınız konusunda net değilim. Daha sonra istediğiniz gibi değişkenler ekleyebilir ve kullanabilirsiniz, dosyayı bir PHP dosyası olarak kaydedebilir ve bu .php dosyasına .css dosyası yerine stil sayfası olarak bağlayabilirsiniz.

PHP olmak zorunda değil, ama ne demek istediğimi elde.

Programlama yapmak istediğimizde, neden CSS (belki) değişkenler gibi şeyleri destekleyene kadar bir programlama dili kullanmıyorsunuz?

Ayrıca Nicole Sullivan'ın Nesne yönelimli CSS'sine de göz atın .


Hepimiz PHP kullanamayız çünkü iş bazılarımızın yapmamasını gerektirir!
horiatu

3

dicejs.com (resmen cssobjs) SASS'ın istemci tarafı sürümüdür. CSS'nizde (json biçimli CSS'de depolanan) değişkenleri ayarlayabilir ve renk değişkenlerinizi yeniden kullanabilirsiniz.

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

Ve işte belgelerinden biraz daha yararlı olan indirilebilir bir demoya bir bağlantı: dicejs demo


Bu araç artık 2014'te kullanılamıyor
Daniel

3

SCSS kullanmayı düşünün. CSS sözdizimi ile tam uyumlu olduğundan geçerli bir CSS dosyası da geçerli bir SCSS dosyasıdır. Bu, taşımayı kolaylaştırır, sadece soneki değiştirir. Çok sayıda geliştirmeye sahiptir, en kullanışlıları değişkenler ve iç içe seçicilerdir.

İstemciye göndermeden önce CSS'ye dönüştürmek için bir ön işlemci ile çalıştırmanız gerekir.

Uzun yıllardır hardcore bir CSS geliştiricisiyim, ancak kendimi SCSS'de bir proje yapmaya zorladığımdan, artık başka bir şey kullanmayacağım.


2

Sisteminizde Ruby varsa bunu yapabilirsiniz:

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

Bu Rails için yapıldı, ancak tek başına çalıştırmak için nasıl değiştirileceği için aşağıya bakın.

Bu yöntemi Rails'ten bağımsız olarak, site_settings.rb ile birlikte çalışan ve CSS yollarınızı dikkate alan ve CSS'nizi her yeniden oluşturmak istediğinizde çağırabileceğiniz küçük bir Ruby sarmalayıcı komut dosyası yazarak kullanabilirsiniz (ör. site başlatma sırasında)

Ruby'yi hemen hemen tüm işletim sistemlerinde çalıştırabilirsiniz, bu yüzden platformdan oldukça bağımsız olmalıdır.

örneğin: sarmalayıcı: create_CSS.rb (CSS'nizi oluşturmanız gerektiğinde bu komut dosyasını çalıştırın)

#/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 içindeki create_CSS_files yönteminin şu şekilde değiştirilmesi gerekir:

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

Seçicileri gruplayabilirsiniz:

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

2

Tabii ki, birden fazla sınıfın harika dünyası sayesinde, bunu yapabilir:

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

ama sık sık onları böyle bir şekilde birleştiririm:

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

Anlamsal polisin her tarafınızda olacağını biliyorum, ama işe yarıyor.


1
Eklerdim: farklı ve daha semantik isimler kullanın. Markalama renkleri değişirse, çok sayıda html kodu tekrarlayacaksınız. .Primary, .seincil, .accent vb. Sınıf adlarını kullanın
Eric Harms


1

Css dosyasını bir xsl şablonu olarak yazarsanız, renk değerlerini basit bir xml dosyasından okuyabilirsiniz. Sonra bir xslt işlemci ile css oluşturun.

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 oluşturma komutu: xsltproc -o styles.css styles.xsl colors.xml

styles.css:

body {
    background-color: #ccc;
}

0

Sadece CSS ile mümkün değil.

Daha az.js kullanarak JavaScript ve LESS ile yapabilirsiniz , bu da LESS değişkenlerini CSS'ye canlı hale getirir, ancak bu sadece geliştirme amaçlıdır ve gerçek hayatta kullanım için çok fazla ek yük ekler.

CSS ile gelebileceğiniz en yakın şey, aşağıdaki gibi bir öznitelik alt dize seçici kullanmaktır :

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

ve set idile başlayan isimlerin ayarlanmalıdır istediğiniz tüm unsurların s colvar-gibi colvar-header. Ardından rengi değiştirdiğinizde tüm kimlik stilleri güncellenir. Bu sadece CSS ile alabileceğiniz kadar yakın.


Sadece CSS ile yapıyorum, css değişkenleri ile Mozilla örneği
Arthur Weborg

tüm kullanıcılarınız mozilla kullanıyorsa harika
bununla

Krom, safari ve opera ile de çalışır.
Arthur Weborg

pmsl OP tarafından benim yazımda titiz lise dilbilgisi düzeltmeleri nedir? O kadar da kötü değildi.
user2317093
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.