Boilerplate sass structure

[oxyc]

• Use mixins so that the selectors can be changed.
• Stick to CSS variables and avoid fancy sass functions such as color manipulation because of it.
• Have a master main sass entrypoint that imports all the components with an option to disable individual component output. This is when a project just imports the sass but not necessarily the stencil components themselves.

Idea:

// src/components/gds-button/button.scss

@mixin base {
  background: var(--gds-button-background);
}

// src/components/gds-button/gds-button.scss

@forward "button" as button-*;
@use "button" as *;

$output: true !default;

@if $output {
  .gds-button {
    @include base;
  }
}

// gds.scss
@forward "src/components/gds-button/button";

// project-styles.scss
@use 'gds' with ($output: true);

@use 'src/components/gds-button/button' as foo;

.wp-block-button__link {
  @include gds.button-base;
}

.wp-block-button__link {
  @include foo.base;
}