我正在用 HTML 和 SASS/CSS 构建一个网格布局。为了创建网格，我有一个mixin，包含我的项目所需的不同参数，如下所示。

我想为网格中的每个项目提供选择列宽的选项，并且在需要时，还能指定列起始的位置。我们可以在项的 HTML 标签中，使用 data-col-start 和 data-col-size 来定义每一个参数。

我在理解如何把mixin @col-start 与属性 data-col-start 连接起来，以及把mixin @col-size 与属性 data-col-size 连接起来时遇到了困难。

SASS中的mixin：

$grid-columns: 12;

@mixin grid($rows: null, $columns: null, $gap: null, $row-gap: null, $column-gap: null, $flow: null) {
    display: grid;
    width: 100%;
    gap: $gap;
    row-gap: $row-gap;
    column-gap: $column-gap;
    grid-template-columns: repeat($grid-columns, 1fr);
    grid-template-rows: $rows;
    grid-auto-flow: $flow;
}

@mixin col-start($start){
    grid-column-start: $start;
}

@mixin col-size($size){
    grid-column-end: span $size;
}

HTML：

<div class="grid">
<div class="grid__item" data-col-size="9" data-col-start="3">
<div class="grid__item" data-col-size="12"></div>
<div class="grid__item" data-col-size="6"></div>
<div class="grid__item" data-col-size="6"></div>
<div class="grid__item" data-col-size="8" data-col-start="4"></div>
...
</div>

解决方案

你可以使用类

<div class="grid__item col-span-9 col-start-3"></div>

这使CSS更简单

$grid-columns: 12;

.grid__item {
  grid-column: var(--col-start, auto) / span var(--col-span, 1);
}

@for $i from 1 through $grid-columns {
  .col-start-#{$i} { --col-start: #{$i}; }
  .col-span-#{$i}  { --col-span:  #{$i}; }
}