较少的自定义功能/混合

user1325696 发表于 Dev

用户名

例如，我接下来有更少的代码

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

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

    }
}

我想写点东西

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

为了获得相同的结果。我怎样才能做到这一点？

七相最大

我想文档中的所有这些示例都可能产生一些想法：

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}
        }
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。