Weniger benutzerdefinierte Funktion/mixin

Ich habe zum Beispiel neben weniger code

form.someForm
{
    .form-group
    {
        > div
        {
            @media @wideMobile
            {
                width: calc(~"100%-144px");            
            }
        }

        > label
        {
            @media @wideMobile
            {
                width: 138px;            
            }
        }

    }
}

Möchte ich etwas schreiben wie

form.someForm
{
    .setWidths(138px,144px); 
}

Das gleiche Ergebnis zu erhalten. Wie kann ich das tun?

InformationsquelleAutor user1325696 | 2014-06-03
  1. 7

    Ich denke, alle diese Beispiele bei die docs könnte ausgehen ein paar Ideen:

    form.someForm {
    .setWidths(138px, 144px);
}

//the mixin:

.setWidths(@labelWidth, @divMargin) {
    .form-group {
        > div {
            @media @wideMobile {
                width: calc(100% ~'-' @divMargin);
            }
        }

        > label {
            @media @wideMobile {
                width: @labelWidth;
            }
        }
    }
}

    Oder noch kürzer (wenn die Nachkommen teilen sich die selben media-query):

    .setWidths(@labelWidth, @divMargin) {
    .form-group {
        @media @wideMobile {
            > div   {width: calc(100% ~'-' @divMargin)}
            > label {width: @labelWidth}
        }
    }
}
    • Sorry für die Verspätung. Könnte nicht eine chance haben es zu versuchen. Dies ist wirklich funktioniert ich danke Ihnen sehr. Das ist so schön zu verstecken, die wissen wie es aufgebaut ist.
    InformationsquelleAutor seven-phases-max
Schreibe einen Kommentar