0
90
ViewsCSS variable en estilo propio
No soy competente en html y css, por lo que ni siquiera sé cómo buscar una publicación aquí en StackOverflow. Me disculpo de antemano si se trata de un duplicado.
quiero hacer algo como esto:
margin-horizontal { margin-left: var; margin-right: var; } <div style="margin-horizontal: 50px">¿Hay alguna manera de lograr este comportamiento?
3 answers
Answer question0
Las variables CSS son posiblemente lo que está buscando. Su ejemplo se vería de la siguiente manera.
CSS:
:root { --space: 50px; } .margin-horizontal { margin-left: var(--space); margin-right: var(--space); }HTML:
<div class="margin-horizontal">...</div>0
Para agregar a la respuesta de Chris05: también puede configurar mediante programación las variables CSS desde JavaScript.
document.documentElement.style.setProperty('--space', '150px'); document.documentElement.style.setProperty('--space2', '20px'); :root { --space: 50px; --space2: 50px; } div { color: white; text-align: center; background-color: #454545; margin-top: 10px; } .margin-horizontal { margin-left: var(--space); margin-right: var(--space); } .margin-horizontal2 { margin-left: var(--space2); margin-right: var(--space2); } <div class="margin-horizontal">150px margins</div> <div class="margin-horizontal2">20px margins</div>0
Ampliando la respuesta de @ chris05, si desea tener diferentes valores de márgenes para diferentes divs, puede agregar una clase que establezca la variable CSS en un valor diferente, por ejemplo:
.m-25 { --space: 25px; } .m-75 { --space: 75px; }Luego, su valor predeterminado será 50 px, y si desea uno diferente, simplemente agregue una clase de modificador:
<div class="margin-horizontal">Foo</div> <div class="m-25 margin-horizontal">Bar</div>y verás:
