¿Cómo puedo definir colores como variables en CSS?

Estoy trabajando en un archivo CSS que es bastante largo. Sé que el cliente podría solicitar cambios en el esquema de colores, y me pregunto: ¿es posible asignar colores a las variables, de modo que solo puedo cambiar una variable para que el nuevo color se aplique a todos los elementos que lo usan?

Tenga en cuenta que no puedo usar PHP para cambiar dinámicamente el archivo CSS.

CSS lo admite de forma nativa con las variables CSS .

Ejemplo de archivo CSS

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

Para un ejemplo de trabajo, consulte este JSFiddle (el ejemplo muestra que uno de los selectores CSS en el violín tiene el color codificado en azul, el otro selector CSS usa variables CSS, tanto originales como syntax actual, para establecer el color en azul) .

Manipular una variable de CSS en JavaScript / lado del cliente

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

Soporte en todos los navegadores modernos

Firefox 31+ , Chrome 49+ , Safari 9.1+ , Microsoft Edge 15+ y Opera 36+ se envían con soporte nativo para las variables de CSS.

La gente sigue votando mi respuesta, pero es una solución terrible en comparación con la alegría de sass o menos , particularmente teniendo en cuenta la cantidad de GUI fáciles de usar para estos días. Si tiene sentido, ignore todo lo que sugiero a continuación.

Puede poner un comentario en el CSS antes de cada color para que sirva como un tipo de variable, que puede cambiar el valor de usar Buscar / Reemplazar, entonces …

En la parte superior del archivo css

 /********************* Colour reference chart**************** *************************** comment ********* colour ******** box background colour bbg #567890 box border colour bb #abcdef box text colour bt #123456 */ 

Más adelante en el archivo CSS

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

Luego, por ejemplo, cambie el esquema de color para el texto del cuadro que busca y reemplaza en

 /*bt*/#123456 

CSS en sí no usa variables. Sin embargo, puede usar otro idioma como SASS para definir su estilo usando variables, y producir automáticamente archivos CSS, que luego puede colocar en la web. Tenga en cuenta que deberá volver a ejecutar el generador cada vez que realice un cambio en su CSS, pero eso no es tan difícil.

No hay una solución sencilla de CSS. Podrías hacer esto:

  • Encuentre todas las instancias de background-color de background-color y color en su archivo CSS y cree un nombre de clase para cada color único.

     .top-header { color: #fff; } .content-text { color: #f00; } .bg-leftnav { background-color: #fff; } .bg-column { background-color: #f00; } 
  • A continuación, examine cada una de las páginas de su sitio donde haya color y agregue las clases adecuadas para el color y el color de fondo.

  • Por último, elimine las referencias de colores en su CSS que no sean las clases de color recién creadas.

Puedes probar las variables de CSS3 :

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

La gem “menos” Ruby para CSS se ve increíble.

http://lesscss.org/

Sí, en un futuro cercano (escribo esto en junio de 2012) puede definir variables css nativas, sin usar less / sass, etc. El motor Webkit acaba de implementar las primeras reglas de variables css, por lo que las versiones de vanguardia de Chrome y Safari ya están trabajando con ellas. Consulte el registro de desarrollo de Webkit oficial (Chrome / Safari) con una demostración del navegador CSS en el sitio.

Es de esperar que podamos esperar una amplia compatibilidad con el navegador de variables css nativas en los próximos meses.

No tengo claro por qué no puedes usar PHP. A continuación, simplemente puede agregar y usar las variables que desee, guardar el archivo como un archivo PHP y vincularlo a ese archivo .php como la hoja de estilos en lugar del archivo .css.

No tiene que ser PHP, pero entiendes lo que quiero decir.

Cuando queremos algo de progtwigción, ¿por qué no usar un lenguaje de progtwigción hasta que CSS (tal vez) soporte cosas como variables?

Además, mira el CSS orientado a objetos de Nicole Sullivan.

Puede pasar el CSS a través de javascript y reemplazar todas las instancias de COLOUR1 con un color determinado (básicamente regexarlo) y proporcionar una hoja de estilo de respaldo en caso de que el usuario final tenga JS desactivado.

dicejs.com (formalmente cssobjs) es una versión del cliente de SASS. Puede establecer variables en su CSS (almacenadas en CSS formateado json) y reutilizar sus variables de color.

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

Y aquí hay un enlace a una demo descargable completa que es un poco más útil que su documentación: dicejs demo

Considera usar SCSS. Es totalmente compatible con la syntax CSS, por lo que un archivo CSS válido también es un archivo SCSS válido. Esto facilita la migración, simplemente cambie el sufijo. Tiene numerosas mejoras, las más útiles son las variables y los selectores nesteds.

Debe ejecutarlo a través de un preprocesador para convertirlo a CSS antes de enviarlo al cliente.

He sido un desarrollador de CSS duro durante muchos años, pero desde que me obligué a hacer un proyecto en SCSS, ahora no usaré nada más.

Si tienes Ruby en tu sistema, puedes hacer esto:

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

Esto se hizo para Rails, pero mira a continuación cómo modificarlo para ejecutarlo solo.

Puede usar este método independientemente de Rails, escribiendo un pequeño script Ruby wrapper que funcione junto con site_settings.rb y tenga en cuenta sus rutas CSS, a las que puede llamar cada vez que desee volver a generar su CSS (por ejemplo, durante el inicio del sitio)

Puede ejecutar Ruby en prácticamente cualquier sistema operativo, por lo que debería ser bastante independiente de la plataforma.

por ejemplo, wrapper: generate_CSS.rb (ejecuta este script cada vez que necesites generar tu 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 ) 

el método generate_CSS_files en site_settings.rb necesita ser modificado así:

 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 , eg #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 

Puede agrupar selectores:

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

No me da miedo PHP, pero Zope y Plone usan algo similar a SASS llamado DTML para lograr esto. Es increíblemente útil en CMS.

Upfront Systems tiene un buen ejemplo de su uso en Plone.

Si escribe el archivo css como una plantilla xsl, puede leer los valores de color de un archivo xml simple. Luego crea el CSS con un procesador xslt.

colors.xml:

   #ccc  

styles.xsl:

    body { background-color: ; }   

Comando para procesar css: xsltproc -o styles.css styles.xsl colors.xml

styles.css:

 body { background-color: #ccc; } 

Claro que puede, más o menos, gracias al maravilloso mundo de las clases múltiples, puede hacer esto:

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

pero a menudo termino combinándolos de todos modos así:

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

Sé que la policía semántica estará por todos lados, pero funciona.

No use variables css3 debido al soporte.

Haría lo siguiente si quieres una solución de CSS pura.

  1. Usa clases de color con nombres semenáticos .

     .bg-primary { background: #880000; } .bg-secondary { background: #008800; } .bg-accent { background: #F5F5F5; } 
  2. Separar la estructura de la piel (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. Coloque estos dentro de un archivo css por separado para cambiarlos según sea necesario.

No es posible solo con CSS.

Puede hacerlo con JavaScript y MENOS usando less.js , que generará LESS variables en CSS Live, pero solo para desarrollo y agrega demasiada sobrecarga para el uso en la vida real.

Lo más cerca que puede venir con CSS es usar un selector de subcadena de atributos como este:

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

y establezca las id de todos los elementos que desea que se ajusten a los nombres que comienzan con colvar- , como colvar-header . Luego, cuando cambias el color, todos los estilos de ID se actualizan. Eso es lo más cercano que puedes obtener con CSS solo.