Question

我正在渲染一个带有字段和组的表单，其中递归引导面板，因此面板中有面板。我如何递归地永远不知道面板的最大深度，我想做的是通过标题面板的较浅颜色。保留父亲引导的主要颜色。我的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Less</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="assets/vendors/bootstrap/css/bootstrap.min.css">

        <link rel="stylesheet/less" type="text/css" href="assets/css/styles.less" />


    </head>
    <body style="padding-top:20px;">

        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div id="father" class="panel panel-primary">
                        <div class="panel-heading"><h3 class="panel-title">Panel title 1</h3></div>
                        <div class="panel-body">
                        Panel content 1
                            <div class="panel panel-primary">
                                <div class="panel-heading"><h3 class="panel-title">Panel title 2</h3></div>
                                <div class="panel-body">
                                Panel content 2

                                    <div class="panel panel-primary">
                                        <div class="panel-heading"><h3 class="panel-title">Panel title 2</h3></div>
                                        <div class="panel-body">
                                        Panel content 3

                                            <div class="panel panel-primary">
                                                <div class="panel-heading"><h3 class="panel-title">Panel title n</h3></div>
                                                <div class="panel-body">
                                                Panel content n

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="assets/vendors/jquery-1.11.1.min.js"></script>
        <script src="assets/vendors/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/vendors/less-1.7.5.min.js"></script>        
    </body>
</html>

我的代码较少：

@color: #428bca;

.panel-heading {
  background-color: lighten(@color, 10%) !important;
}

我不知道如何通过递归获取父面板的颜色来使其更清晰。

Answer 1

这个Q有点像：

（有关为什么不能在子规则集中重用父属性值的详细信息，请参阅那里）。幸运的是，对于您的特定示例，仍然是纯粹的Less / CSS解决方案，因此我认为提供专用答案是可以的。您只需要为合理数量的嵌套面板预生成样式。而且，由于您使用明确指定的颜色值，因此代码变得如此简单：

.panel-primary > .panel-heading {
    .lighten-nested-panels(#428bca, 5);
}

.lighten-nested-panels(@color, @max-nesting-level, @fade: 10%) {
    .-; .-(@i: 0) when (@i < @max-nesting-level) {
        background-color: lighten(@color, (@fade * @i));
        .panel & {.-((@i + 1))}
    }
}

生成CSS：

                     .panel-primary > .panel-heading {background-color: #428bca}
              .panel .panel-primary > .panel-heading {background-color: #6aa3d5}
       .panel .panel .panel-primary > .panel-heading {background-color: #92bce0}
.panel .panel .panel .panel-primary > .panel-heading {background-color: #b9d4ec}
// etc.

完成codepen demo。

此外，还可以修改此方法以适用于＆＃34; unknown＆＃34;通过.panel-heading图层（如[1]）或:before/:after叠加层（如[2]中）变暗/变亮的gradient颜色。

以递归方式更改背景颜色

1 个答案: