layout.css.variables.enabled = true in about:config.| Click to Zoom |
var then - then variable-name and declare it to selector like :root or html . And use it as like...@import url(http://fonts.googleapis.com/css?family=Nunito:300);
* {
margin: 0;
padding: 0;
}
:root {
--body-bg: #333;
--color: hotpink;
--color2: orange;
--font-size: 1.3em;
--top-bottom-padding-size: 0.2em;
}
body {
background: var(--body-bg);
font-family: 'Nunito', sans-serif;
font-size: var(--font-size);
}
h1, h2, h3, h4, h5, h6 {
--color: yellow;
color: var(--color);
text-align: center;
margin: var(--top-bottom-padding-size);
}
.info {
bottom: var(--top-bottom-padding-size);
color: var(--color2);
position: absolute;
right: var(--top-bottom-padding-size);
}
.info a {
color: var(--color);
}
.breaking-news {
text-align: center;
color: var(--color);
}
.breaking-news code {
color: var(--color2);
padding: var(--top-bottom-padding-size);
font-family: inherit;
font-weight: bold;
}
# So now you can play with CSS Variables. Thanks.Labels: CSS, CSS Variables, Firefox