Creación de variables globales de CSS: gestión del tema de hoja de estilo

¿Hay alguna manera de establecer variables globales en css como:

@Color1 = #fff; @Color2 = #b00; h1 { color:@Color1; background:@Color2; } 

Última actualización: 03/04/2018

¡Las variables CSS (propiedades personalizadas) han llegado!

Otro año otro navegador. Edge se ha unido a Mozilla y Google al respaldar esta característica realmente excelente.


¡Se requiere el preprocesador “NO” !

Hay mucha repetición en CSS. Se puede usar un solo color en varios lugares.

Para algunas declaraciones CSS, es posible declarar esto más alto en la cascada y dejar que la herencia de CSS resuelva este problema de forma natural.

Para proyectos no triviales, esto no siempre es posible. Al declarar una variable en el :root pseudo-elemento :root , un autor de CSS puede detener algunas instancias de repetición utilizando la variable.

Cómo funciona

Establezca su variable en la parte superior de su hoja de estilo:

CSS

Crea una clase de raíz:

 :root { } 

Crear variables (- [String] : [value] )

 :root { --red: #b00; --blue: #00b; --fullwidth: 100%; } 

Establezca sus variables en cualquier lugar en su documento CSS:

 h1 { color: var(--red); } #MyText { color: var(--blue); width: var(--fullwidth); } 

SOPORTE / COMPATIBILIDAD DEL NAVEGADOR

Ver caniuse.com para ver la compatibilidad actual.

! [navegadores compatibles

FIREFOX: versión 31 + (habilitado por defecto)

(Liderando el camino como de costumbre.) Más información de Mozilla

CROMO: Versión 49 + (habilitado por defecto) .

“Esta característica se puede habilitar en la versión 48 de Chrome para probar habilitando la función de plataforma web experimental . Ingrese chrome://flags/ en la barra de direcciones de Chrome para acceder a esta configuración”.

Safari / IOS Safari: Versión 9.1 / 9.3 (Habilitado por defecto) .

Opera: versión 39 + (habilitada por defecto) .

Android: versión 52 + (habilitada por defecto) .

IE: nunca va a suceder.

Edge: Versión 15 + (habilitado por defecto) .

Propiedades personalizadas CSS aterrizadas en Windows Insider Vista previa comstackción 14986


W3C SPEC

Especificación completa para las próximas variables de CSS

Lee mas


PRUÉBALO

Un violín y un fragmento se adjuntan a continuación para probar:

(Solo funcionará con navegadores compatibles).

DEMO FIDDLE

 :root { --red: #b00; --blue: #4679bd; --grey: #ddd; --W200: 200px; --Lft: left; } .Bx1, .Bx2, .Bx3, .Bx4 { float: var(--Lft); width: var(--W200); height: var(--W200); margin: 10px; padding: 10px; border: 1px solid var(--red); } .Bx1 { color: var(--red); background: var(--grey); } .Bx2 { color: var(--grey); background: black; } .Bx3 { color: var(--grey); background: var(--blue); } .Bx4 { color: var(--grey); background: var(--red); } 
 

If you see four square boxes then variables are working as expected.

I should be red text on grey background.
I should be grey text on black background.
I should be grey text on blue background.
I should be grey text on red background.

No puede crear variables en CSS ahora mismo. Si desea este tipo de funcionalidad, necesitará usar un preprocesador CSS como SASS o LESS . Aquí están sus estilos como aparecerían en SASS:

 $Color1:#fff; $Color2:#b00; $Color3:#050; h1 { color:$Color1; background:$Color2; } 

También te permiten hacer otras cosas (impresionantes) como selectores de anidamiento:

 #some-id { color:red; &:hover { cursor:pointer; } } 

Esto se comstackría para:

 #some-id { color:red; } #some-id:hover { cursor:pointer; } 

Consulte el tutorial SASS oficial para obtener instrucciones de configuración y más sobre la syntax / características. Personalmente uso una extensión de Visual Studio llamada Web Workbench de Mindscape para un fácil desarrollo, también hay muchos complementos para otros IDEs.

Actualizar

Desde julio / agosto de 2014, Firefox ha implementado el borrador de especificaciones para las variables de CSS, aquí está la syntax:

 :root { --main-color: #06c; --accent-color: #006; } /* The rest of the CSS file */ #foo h1 { color: var(--main-color); } 

No es posible usar CSS, pero usar un preprocesador CSS como less o SASS .

Pruebe SASS http://sass-lang.com/ o LESS http://lesscss.org/

Amo SASS y lo uso para todos mis proyectos.

Lo hago de esta manera:

El html:

    

El xCss.php:

  button { border: solid 1px ; border-radius:4px; font: ; background-color:; } 

Necesitarás LESS o SASS por el mismo ..

Pero aquí hay otra alternativa que creo que funcionará en CSS3.

http://css3.bradshawenterprises.com/blog/css-variables/

Ejemplo:

  :root { -webkit-var-beautifulColor: rgba(255,40,100, 0.8); -moz-var-beautifulColor: rgba(255,40,100, 0.8); -ms-var-beautifulColor: rgba(255,40,100, 0.8); -o-var-beautifulColor: rgba(255,40,100, 0.8); var-beautifulColor: rgba(255,40,100, 0.8); } .example1 h1 { color: -webkit-var(beautifulColor); color: -moz-var(beautifulColor); color: -ms-var(beautifulColor); color: -o-var(beautifulColor); color: var(beautifulColor); }