Question

我目前有两个使用相同布局的视图。但是，它们在以下方面彼此不同：

查看Foo：

<div class="MajorSection" id="foo">
</div>

查看栏：

<div class="MajorSection" id="bar">
</div>

我想在一个.less文件中以不同方式声明@labelWidth这两个类，以便我不需要使用以下代码重复自己。

.MajorSection {
    @labelWidth: 10em;

    .editor-label {
        width: @labelWidth;
    }

    input, textarea {
        width: (@editorWidth)-(.5em); //border & padding
    }
}

在View Foo中，我希望@labelWidth为10em，而在Bar中，我希望它为20em。反正有吗？

Answer 1

我认为实现这一目标的最简单方法是定义＆＃34;依赖＆＃34;样式通过parametric mixin，例如：

.MajorSection {

    #foo& {
        .labelStyles(10em);
    }

    #bar& {
        .labelStyles(20em);
    }

    .labelStyles(@width) {
        .editor-label {
            width: @width;
        }
    }

    input, textarea {
        width: (@editorWidth - .5em); // border & padding
    }
}

CSS输出：

#foo.MajorSection .editor-label {
  width: 10em;
}
#bar.MajorSection .editor-label {
  width: 20em;
}
.MajorSection input,
.MajorSection textarea {
  width: ...;
}

在LESS css中有条件地声明变量

1 个答案: