SASS Mixin для CSS-сетки ⇐ Html

[Anonymous]

Я создаю макет сетки в HTML и SASS/CSS. Чтобы создать сетку, у меня есть миксин с различными параметрами, необходимыми для моего проекта, как вы можете видеть ниже.
Я хотел бы иметь возможность для каждого элемента моей сетки выбирать размер столбца, а также, при необходимости, позицию, где столбец начинается. Мы могли бы определить каждый параметр в теге HTML элемента, используя data-col-start и data-col-size.
Мне трудно понять, как соединить миксин @col-start с атрибутом data-col-start и миксин @col-size с атрибутом data-col-size.
Миксины в SASS:
$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:




...



Подробнее здесь: https://stackoverflow.com/questions/798 ... r-css-grid