Epic: Transition SASS to using the module system instead of imports

[pyrello]

https://css-tricks.com/introducing-sass-modules/

Problem

The import system in SASS is being deprecated in favor of a new module system with use syntax.

Proposed solution

Migrate all the SASS files to using this new system. Each component or asset file should have it's own issue, as this will be a lengthy project and take a while.

src/assets/scss

• [ ] components/footer.scss #332
• [ ] components/iowa-bar.scss #333
• [ ] _base.scss #334
• [ ] _layout-main.scss #335
• [ ] _local-fonts.scss #336
• [ ] _utilities.scss #337
• [ ] _variables.scss #338
• [ ] fonts.scss #339
• [ ] reset.scss #340
• [ ] theme.scss - Maybe also move this to the theme folder? #341
• [ ] uids-base.scss #342
• [ ] uids.scss #343

src/components

• [ ] accordion/accordion.scss #344
• [ ] alert/alert.scss #345
• [ ] badge/badge.scss #346
• [ ] banner/banner.scss #347
• [ ] blockquote/blockquote.scss #348
• [ ] branding/footer/footer.scss #349
• [ ] branding/iowa-bar/iowa-bar.scss #350
• [ ] branding/logo/logo.scss #351
• [ ] branding/parent-site-name/parent-site-name.scss #352
• [ ] branding/site-name/site-name.scss #353
• [ ] breadcrumbs/breadcrumbs.scss #354
• [ ] button/button.scss #355
• [ ] card/card.scss #356
• [ ] classes/classes.scss #357
• [ ] colors/colors.scss #358
• [ ] cta/cta.scss #359
• [ ] form/forms/forms.scss #360
• [ ] form/search/search.scss #361
• [ ] headline/headline.scss #362
• [ ] highlight/highlight.scss #363
• [ ] layouts/basic-page/basic-page.scss #364
• [ ] menus/group/_group.scss - still necessary? #365
• [ ] menus/internal-navigation/_internal-navigation.scss #366
• [ ] menus/main-menu/main-menu.scss #367
• [ ] menus/off-canvas/off-canvas.scss #368
• [ ] menus/quick/_quick.scss #369
• [ ] menus/top/top.scss #370
• [ ] menus/user-menu/user-menu.scss #371
• [ ] menus/vertical-dots/vertical-dots.scss #372
• [ ] menus/vertical/_vertical.scss #373
• [ ] pagination/_pagination.scss #374
• [ ] search-toggle/_search-toggle.scss #375
• [ ] slider/slider.scss #376
• [ ] stat/stat.scss #377
• [ ] tables/tables.scss #378
• [ ] tabs/tabs.scss #379
• [ ] typography/headings/headings.scss #380
• [ ] typography/lists/lists.scss #381
• [ ] typography/paragraph/paragraph.scss #382
• [ ] video/vertical/_vertical.scss #383
• [ ] video/video-utilities/_video-utilities.scss #384

[joewhitsitt]

https://sass-lang.com/blog/the-module-system-is-launched details EOL and possible migration techniques

[pyrello]

Need to check out if we can do this yet in 4.x branch.