SASS实现：父元素无layout-类时设置子元素宽度为100%

现有代码 #

CSS

[class^="layout-"] div, [class*=" layout-"] div {
  display: inline-block;
}

.layout-20X80 div.label-txt {
  width: 20%
}

.layout-20X80 div.value-container {
  width: 80%
}

HTML

<div class="dync-template tmp-bg layout-20X80">
  <div class="label-txt">Select Your Response</div>
  <div class="value-container">
    <p>Hello World!!</p>
  </div>
</div>

SASS实现方案 #

通过SASS的列表循环和否定选择器，可以批量处理多套布局类，同时设置无布局类时的默认样式：

// 定义所有需要的布局比例列表
$layout-ratios: 20X80, 30X70, 40X60;

// 默认样式：父元素无layout-开头类时，设置宽度100%
:not([class^="layout-"]):not([class*=" layout-"]) {
  .label-txt, .value-container {
    width: 100%;
    display: block; // 可选：恢复默认块级布局，按需调整
  }
}

// 统一设置带layout-前缀父元素的子元素display样式
[class^="layout-"], [class*=" layout-"] {
  div {
    display: inline-block;
  }
}

// 循环生成各布局类的宽度规则
@each $ratio in $layout-ratios {
  // 从比例字符串中拆分出两个宽度值
  $label-width: str-slice($ratio, 1, 2) + '%';
  $value-width: str-slice($ratio, 4, 5) + '%';

  .layout-#{$ratio} {
    .label-txt {
      width: $label-width;
    }
    .value-container {
      width: $value-width;
    }
  }
}

代码说明 #

• 默认样式逻辑：通过:not选择器精准匹配不带layout-前缀的父元素，为内部的标签和容器设置全屏宽度，同时可根据需求调整display属性。
• 统一display控制：一次性为所有布局类的父元素设置子元素的inline-block展示，避免重复代码。
• 批量生成布局规则：利用SASS列表循环自动解析比例字符串，生成对应宽度样式，后续新增布局只需在$layout-ratios列表中添加新比例即可。

内容的提问来源于stack exchange，提问作者Kiara