Wenn Sie eine Variable erstellen, wird Sie für Sie verfügbar, um innerhalb des Elements zu verwenden, in dem Sie es erstellen. Es wird auch in allen Elementen, die in ihm verschachtelt sind, verfügbar. Dieser Effekt wird als Cascading bezeichnet.
Aufgrund der Kaskadierung werden CSS-Variablen oft in der: RootElement definiert.
Sie können sich das: RootElement als Container für Ihr gesamtes HTML-Dokument vorstellen, so wie ein HtmlElement ein Container für das BodyElement ist.
Indem Sie Ihre Variablen in: root erstellen, werden Sie auf der gesamten Webseite verfügbar sein.
[php]
<style>
:root {
/* add code below */
–myvariable-bottom: gray;
/* add code above */
}
body {
/* var(–myvariable-bottom, fallback wert);*/
background:var(–myvariable-bottom, #efccef);
}
.someclass {
top: 15%;
left: 35%;
background: var(–myvariable-bottom, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
</style>
[/php]