Mixins

To speed up your development process in SCSS you can use mixins. These are really useful shortcodes to add in your SCSS elements.

@import "mixins";

Name	Effect	Variables	Example
flexbox	Add a flexbox	$align, $justify, $gap (not required)	`@include flexbox(center, space-between, $spacer-l)`
inlineFlex	Add an inline flexbox	$align, $justify, $gap (not required)	`@include inlineFlex(flex-end, space-around, $spacer-s)`
grid	Add a CSS grid	$template, $gap (not required)	`@include grid(1fr 2fr, $spacer-xs)`
inlineGrid	Add an inline grid	$template, $gap (not required)	`@include inlineGrid(3fr 1fr, $spacer-xxl)`
gridCol	Add a CSS grid with columns all the same size	$col, $gap (not-required)	`@include gridCol(4, $spacer-s)`
icon	Add a way to add an icon in SCSS	$icon, $size, $color (not required)	`@include icon(chevron-down-solid, 16, $color-primary-500)`
paMar	Sets margins and paddings to 0	None	`@include paMar()`
ulNone	Sets margins and paddings to 0, and list-style to none	None	`@include ulNone()`
tablet	Media queries for tablet viewports	None	`@include tablet()`
mobile	Media queries for mobile viewports	None	`@include mobile()`