Extending

While layouts should often be set directly on the HTML elements, it might be useful to use some of them in your SCSS.

For example, loops generated elements could overweight your HTML with asterix's layouts attributes repeating on each item.

Because Asterix is composed of a lot of specifiers, extending with the native sass function can take a bunch of code lines.

// Extend the css variables set.
@extend([data-layout]);
@extend([data-gap]);
// Extend a specific rule.
@extend([data-layout*="--block"]);
@extend([data-layout*="--mgrid"]);
@extend([data-gap*='--1']);

--extends($selectors)

To facilitate extend writing, Asterix provides a --extends() mixin:

@include --extends((
    data-layout: --block --mgrid,
    data-gap: --1,
));

Note that because Asterix is using css variables, you always have to extend the selector wich sets those css variables to css properties.

ex: [data-layout] for layout rules, [data-gap] for gaps etc.

Then, you can extend any specifier.