如果其 class 名称与具有固定名称列表的父 class 名称匹配，则显示直接子项

Question

我学得少了，有一件事情在原始 CSS 中总是很乏味。通常，会有一个 div 用于指示应用程序的更多状态，例如：

<div class="result">
    <div class="success">Request processed OK.</div>
    <div class="error">There was an error processing request.</div>
    <div class="working">Sending your inquiry...</div>
</div>

现在我通常如何设计它是将 class 名称分配给反映当前状态的 .result div。这里的动机是避免直接为元素设置 CSS 样式。

/** hide all child nodes by default**/
div.result>div {
    display: none;
}
/** when error state occurs, show the error div **/
div.result.error>div.error {
    display: block;
}

此解决方案更强大，因为它允许通过单个 CSS class 更改也可以完成其他更改。例如，您可以想象在整个表单甚至整个应用程序上设置 .error 并产生多种效果。

那么现在的问题是，是否可以使用 LESS 为每个 class 名称生成 div.result.error>div.error 序列？我想是这样的：

.result {
        & > div {
            display: none;
        }

        LESS_FOR_EACH(error, success, working) &.$ENTRY > div.$ENTRY {
            display: block;
        }
}

Answer 1

CSS 个变量如何处理：

.error {
  display:var(--error,none)!important;
}

.success {
  display:var(--success,none)!important;
}

.working {
  display:var(--working,none)!important;
}

<div class="result" style="--error:block">
    <div class="success">Request processed OK.</div>
    <div class="error">There was an error processing request.</div>
    <div class="working">Sending your inquiry...</div>
</div>

<div class="result" style="--working:block">
    <div class="success">Request processed OK.</div>
    <div class="error">There was an error processing request.</div>
    <div class="working">Sending your inquiry...</div>
</div>

您可以使用 SASS 轻松生成代码：

$classes: "error", "working","success";

@each $m in $classes {
  .#{$m} {
     display:var(--#{$m},none)!important;
  }
}

少

@classes: error, working, success;

each(@classes, {
  .@{value} {
     display: e(%("var(--%a,none)!important", @value));
  }
});

要直接回答您的问题，您可以执行以下操作

@classes: error, working, success;

.result {
   & > div {
       display: none;
   }
        
   each(@classes, {
     &.@{value} > div.@{value} {
        display: block;
     }
    });
}

如果其 class 名称与具有固定名称列表的父 class 名称匹配，则显示直接子项

Display direct child if its class name matches parents class name with fixed list of names

css

less