¿Es posible definir constantes en css?

Question

Uso unos pocos colores en mi hoja de estilo CSS. Por ejemplo

#testdiv{ 
    background: #123456; 
} 

¿Es posible definir ese color por su nombre para que pueda hacer referencia a ella en la hoja CSS como esto

#testdiv{ 
    background: COLORNAME; 
} 

Answer 1

Es probablemente una mejor práctica para definir una clase CSS y volver a usarlo en cada elemento que desea asignar el color a la vez de la codificación a una elemento específico

así:

.darkBackground { 
    background: #123456; 
} 

.smallText { 
    font-size:8pt; 
} 

También ayuda a saber que un elemento puede tener varias clases aplican para que pueda romper con sus valores de los elementos "constantes" en clases separadas y aplicar más de una si es necesario.

<div id="myDiv1" class="darkBackground smallText"></div> 
<div id="myDiv2" class="darkBackground bigText"></div> 

Answer 2

No con CSS sencillo, pero hay algunas extensiones de CSS que se podía uso, como SASS o less-css.

He aquí un ejemplo de menos css:

@color: #4D926F; 

#header { 
    color: @color; 
} 
h2 { 
    color: @color; 
} 

Answer 3

Uso SASS o less.

Hoy en día, el uso de preprocesadores como el anterior es una práctica común para un mejor flujo de trabajo de desarrollo front-end.

Te ayuda a ser más organizado y las características como variables o mixins son algunas de las razones que vale la pena tener en cuenta.

Answer 4

Hay un couple of proposals para esto, por lo que podría suceder pronto, pero hasta ahora no se ha estandarizado nada.

El problema con el uso de clases CSS para esto es que no son de ayuda si desea utilizar el mismo valor para diferentes propiedades, por ejemplo, si desea utilizar un valor de color particular para un borde en un elemento y un color de fondo en otro.

Answer 5

La forma estándar de hacerlo es PHP. Añadir declaraciones #define al comienzo de su archivo CSS, como

#define COLORNAME: #123456;

lugar de vincular al archivo CSS en la cabeza de su archivo HTML, ejecutar un script PHP en ese lugar. El script carga el archivo CSS, reemplaza todas las ocurrencias de COLORNAME por #123456 y transmite el texto parcheado al cliente usando echo o print.

Alternativamente, podría cargar el archivo fuente (también usando PHP), usar PHP para crear un archivo CSS una vez que todas las ocurrencias de #defines sean reemplazadas, y usar ese archivo en su HTML. Esto es más eficiente, ya que está haciendo la conversión solo una vez, en la carga, en lugar de cada vez que carga el archivo HTML.

Answer 6

Usted puede tener constantes en un archivo CSS, declarándolos como esto:

*{ 
-my-lightBlue: #99ccff; 
-my-lightGray: #e6e6e6; 
} 

entonces usted puede utilizar en el archivo CSS como esto:

.menu-item:focused { 
    -fx-background-color: -my-lightBlue; 
} 

Después de que usted puede utilizar programáticamente como este:

progressBar.setStyle("-fx-accent: -my-lightBlue;"); 

Answer 7

En CSS, puede declarar su constante en: root bloc:

:root { 
    --main-bg-color: #1596a7; 
} 

y usar con el método de var():

.panel-header { 
    background: var(--main-bg-color); 
    color: .... 
} 

Answer 8

Sí, el uso de clases es un buen enfoque, pero ahora es posible declarar variables en el CSS. Y las variables (especialmente las de color) son increíblemente útiles cuando declaras el mismo color (uno donde necesitas el valor hexadecimal, si usas un color integrado, realmente no importa tanto).

Y esto está usando CSS simple (y tbh, no tan elegante como usar SASS o menosCSS) pero funciona con propósitos de CSS simple. Primero, defina la variable real en el bloque :root. Puedes definirlo en, por ejemplo, también un bloque p (o cualquier otra cosa) pero solo estará disponible en ese bloque. Así que para asegurarse de que es accesible a nivel mundial, lo puso en el bloque de la raíz:

:root { 
    --custom-color: #f0f0f0; 
} 

Y el uso de la var método (sin el método var no se resolverá como una referencia real) a continuación, puede hacer referencia a ella más tarde:

p{ 
    color: var(--custom-color); 
} 

Desde el bloque :root es (al igual que todas las demás declaraciones CSS) un bloque totalmente funcional que hace referencia a los elementos, no se puede declarar algo como:

:root{ 
    color: #00ff00; 
} 

Eso haría referencia al atributo de color de cada elemento individual y lo configuraría (en este ejemplo) #00ff00. Cada nombre de variable se declara tiene que empezar con --, lo que significa que puede hacer:

:root{ 
    --color: #00ff00; 
} 

Y de nuevo, si se puede, usar algo como SASS o lessCSS. La capacidad de declararlos escribiendo @color = #fff * y haciendo referencia a @color * es mucho más fácil que lidiar con CSS simple y tener que usar la palabra clave var cada vez que quiera acceder a una propiedad personalizada.

Y se puede acceder CSS en línea con JS para obtener y/o alterar las propiedades:

//Inline CSS 
element.style.getPropertyValue("--custom-color"); 

// get variable from wherever 
getComputedStyle(element).getPropertyValue("--custom-color"); 

// set variable on inline style 
element.style.setProperty("--custom-color", "#f0f0f0"); 

NOTA!

Esta es una función recientemente agregada, así que browser compatibility is important to check. Especialmente merece la pena prestar especial atención a Firefox, ya que tiene una brecha entre la introducción de las declaraciones de variables en sí y el método var().

_{* con lessCSS Es @color, con SASS es $color}