ARTICLE AD BOX
I'm building a grid layout in HTML and SASS/CSS. To create the grid I have a mixin with the different parameters needed for my project as you can see below.
I would like to have the option for each item of my grid the choice of the column size and also, when needed, the position where the column starts. We could define each parameter in the HTML tag of the item using data-col-start and data-col-size.
I'm having troubles to understand how to connect the mixin @col-start with the attribute data-col-start and the mixin @col-size with the attribute data-col-size.
The mixins in 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; }The 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>