website-redesign/draft/res/lib.scss

33 lines
746 B
SCSS

////////////////////////////////////////////////////////////////////////////////
// unstyled markers
//
// TODO add an option for disabling all these rules in the production build
@mixin mark-unstyled-children {
* {
border: 1px dashed red;
}
}
@mixin is-styled {
border: 0;
}
////////////////////////////////////////////////////////////////////////////////
// layout strategies
@mixin stack($gap) {
// Arranges for all children to be separated by the same distance, `$gap`, in
// such a way that children can also use the same layout (with a different
// gap) inside them.
//
// Source: <https://every-layout.dev/layouts/stack/>
@include is-styled;
& > * {
margin: 0;
}
& > * + * {
margin-top: $gap;
}
}