적은 사용자 정의 기능 / 믹스

Question

다음 코드가 적습니다

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

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

    }
}  

.

나는

와 같은 것을 쓸 것을 원한다.

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

.

동일한 결과를 얻으려면.어떻게해야합니까?

Answer 1

문서 에서 몇 가지 아이디어를 emanate 할 수 있습니다.

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

// the mixin:

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

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

.

또는 더 짧은 (자손이 동일한 미디어 쿼리를 공유하는 경우) :

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

.