usar - js variable in css
¿Es posible definir constantes en css? (9)
En CSS, puede declarar su constante en: root bloc:
:root {
--main-bg-color: #1596a7;
}
y usando el método var ():
.panel-header {
background: var(--main-bg-color);
color: ....
}
Uso algunos colores en mi hoja de estilo CSS. Por ejemplo
#testdiv{
background: #123456;
}
¿Es posible definir ese color por nombre para que pueda referenciarlo en la hoja de css como esta
#testdiv{
background: COLORNAME;
}
Hay un par de propuestas 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 usar el mismo valor para diferentes propiedades, por ejemplo, si desea usar un valor de color particular para un borde en un elemento y un color de fondo en otro.
La forma estándar de hacer esto es PHP. Agregue declaraciones #define al comienzo de su archivo CSS, como
#define COLORNAME: #123456;
En lugar de vincular al archivo CSS en el encabezado de su archivo HTML, ejecute un script PHP en esa ubicación. 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, puede 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.
Probablemente sea una mejor práctica definir una clase CSS y reutilizarla en cada elemento al que desee asignar el color en lugar de codificarlo en un elemento específico.
Al igual que:
.darkBackground {
background: #123456;
}
.smallText {
font-size:8pt;
}
También ayuda saber que un elemento puede tener varias clases aplicadas para que pueda dividir sus valores de elementos "Constantes" en clases separadas y aplicar más de uno según sea necesario.
<div id="myDiv1" class="darkBackground smallText"></div>
<div id="myDiv2" class="darkBackground bigText"></div>
Puede tener constantes en un archivo CSS y declararlas así:
*{
-my-lightBlue: #99ccff;
-my-lightGray: #e6e6e6;
}
Entonces puedes usarlos en el archivo CSS como este:
.menu-item:focused {
-fx-background-color: -my-lightBlue;
}
Después de eso puedes usarlos programáticamente de esta manera:
progressBar.setStyle("-fx-accent: -my-lightBlue;");
Puedes usar variables Sass :
$color: #4D926F;
.someclass{
color: $color;
}
Sí, usar clases es un buen enfoque, pero ahora es posible declarar variables en 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 es usar CSS simple (y tbh, no tan elegante como usar SASS o lessCSS) pero funciona con propósitos de CSS simple. Primero, defina la variable real en el :root bloque :root . También puede definirlo en, por ejemplo, un bloque p (o cualquier otra cosa) pero solo estará disponible en ese bloque. Para asegurarse de que sea accesible a nivel mundial, colóquelo en el bloque raíz:
:root {
--custom-color: #f0f0f0;
}
Y utilizando el método var (sin el método var no se resolverá como una referencia real), puede consultarlo más adelante:
p{
color: var(--custom-color);
}
Dado que :root bloque de :root es (como todas las demás declaraciones de CSS) un bloque en pleno funcionamiento que hace referencia a los elementos, no 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 que declaras tiene que comenzar con -- , lo que significa que puedes hacer:
:root{
--color: #00ff00;
}
Y nuevamente, si puedes, usa algo como SASS o lessCSS. La capacidad de declararlos escribiendo @color = #fff * y haciendo referencia con @color * es mucho más fácil que tratar con CSS simple y tener que usar la palabra clave var cada vez que desee acceder a una propiedad personalizada.
Y puede acceder a CSS en línea con JS para obtener y / o modificar 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, por lo que es importante verificar la compatibilidad del navegador . 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 menosCSS es @color , con SASS es $color