SASS：有没有办法根据类名中的数字计算属性？

Question

我正在使用Angular Grid。我有一个数据表，其中数据嵌套在行中，嵌套行级别的数量取决于任何给定时间的数据。因此，我有CSS类，例如：

.AG的行级别-1

.AG的行级别-2

.ag-row-level-3

等

我不知道项目前面会有多少潜在的行级别，我想根据行级别应用填充。是否有可能在SCSS / SASS中执行以下操作：

.ag-row-level- $ level {    padding-left：$ level * 20 px }

其中选择器标识所有开始的类.ag-row-level-和padding-left然后根据类名中的实际行级别计算？

谢谢！

Answer 1

不完全是。这样的事情有效：

@for $i from 1 through …
  .ag-row-#{$i}
    padding-left: $i * 20px

将...替换为支持的最大数量。对于这个例子，这应该足以满足你想做的任何事情。

为什么此功能不在SASS中？

Well SASS是一个CSS预处理器。不多。这意味着Sass编译器从中生成有效的CSS，CSS没有该功能。由于该编译器不了解HTML（实际上，没有一种好的方法可以找到，因为有大量的HTML生成技术）它不可能生成所有需要的CSS。

但这还不够

你可以使用Javascript来解决这个问题。这是相当不必要的，我建议你使用第一个例子，但如果这不起作用，你可以这样做：

function parseLevels() {
  /* call this function whenever you need to update it */
  const paragraphs = document.getElementsByClassName('ag-row');
  for (let i = 0; i < paragraphs.length; ++i) {
    paragraphs[i].style.paddingLeft = (20 * paragraphs[i].dataset.level) + "px";
  }
}

parseLevels();

<div class="ag-row" data-level="1">lorem</div>
<div class="ag-row" data-level="2">lorem</div>
<div class="ag-row" data-level="3">lorem</div>
<div class="ag-row" data-level="4">lorem</div>
<div class="ag-row" data-level="5">lorem</div>
<div class="ag-row" data-level="4">lorem</div>
<div class="ag-row" data-level="5">lorem</div>
<div class="ag-row" data-level="3">lorem</div>
<div class="ag-row" data-level="10">lorem</div>