dinamicas - js variable in css

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

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

Considera usar SCSS. Es totalmente compatible con la sintaxis 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 anidados.

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.

Answer 5

La gema "menos" Ruby para CSS se ve increíble.

less

Answer 6

No es posible solo con CSS.

Puede hacerlo con JavaScript y less 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.

Answer 7

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.

Answer 8

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.

Answer 9

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 programación, ¿por qué no usar un lenguaje de programación hasta que CSS (tal vez) soporte cosas como variables?

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

Answer 10

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.

Answer 11

Puede agrupar selectores:

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

Answer 12

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.

Answer 13

Puedes probar las variables de CSS3 :

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

Answer 14

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.

Answer 15

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:

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

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

styles.css:

body {
    background-color: #ccc;
}

Answer 16

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

Answer 17

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

Answer 18

La gente sigue votando mi respuesta, pero es una solución terrible en comparación con la alegría de sass o less , 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