Less 更少的自定义函数/混合
例如,我有更少的代码Less 更少的自定义函数/混合,less,less-mixins,Less,Less Mixins,例如,我有更少的代码 form.someForm { .form-group { > div { @media @wideMobile { width: calc(~"100%-144px"); } } > label { @media
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}
}
}
}