Menos función personalizada / mixin
-
21-12-2019 - |
Pregunta
Por ejemplo, tengo el siguiente código
form.someForm
{
.form-group
{
> div
{
@media @wideMobile
{
width: calc(~"100%-144px");
}
}
> label
{
@media @wideMobile
{
width: 138px;
}
}
}
}
quiero escribir algo como
form.someForm
{
.setWidths(138px,144px);
}
para obtener el mismo resultado.¿Cómo puedo hacer eso?
Solución
Supongo que todos esos ejemplos en los docs podrían emanar algunas ideas:
form.someForm {
.setWidths(138px, 144px);
}
// the mixin:
.setWidths(@labelWidth, @divMargin) {
.form-group {
> div {
@media @wideMobile {
width: calc(100% ~'-' @divMargin);
}
}
> label {
@media @wideMobile {
width: @labelWidth;
}
}
}
}
o incluso más corto (si los descendientes comparten la misma consulta de medios):
.setWidths(@labelWidth, @divMargin) {
.form-group {
@media @wideMobile {
> div {width: calc(100% ~'-' @divMargin)}
> label {width: @labelWidth}
}
}
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow