feature: scss mixins and efficiencies

32teeth commented 2 months ago

Problem

SCSS was very repetitive and could use some improvement

Solution

[x] introduce new @mixins
[x] use said mixins in _variables
[x] introduce @for and @each native SCSS iterator strategies
[x] introduce 1D and 2D arrays in SCSS

the above provides for scalability, repurposability and predictability in SCSS

To Do

Once merged we can explore more SCSS efficiencies and structure this into being a design system based record or work

License

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

justinmk3 commented 2 months ago

Do we actually need SCSS or could we use plain CSS? That would avoid an extra layer / build step / dependency. And modern CSS reduces the need for SCSS, these days.

32teeth commented 2 months ago

Do we actually need SCSS or could we use plain CSS? That would avoid an extra layer / build step / dependency. And modern CSS reduces the need for SCSS, these days.

Hi @justinmk3

Yes, modern CSS, including new (recent) module nesting and rule setting. Although an interesting insight is CSS nesting is different from CSS preprocessors such as Sass in that it is parsed by the browser rather than being pre-compiled by a CSS preprocessor.

[!NOTE] mynah-ui is already uses SCSS preprocessors.

[!TIP] This PR, enhances and extends the use of variable declaration using @each and @for

aws / mynah-ui