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 Transition footer.scss to use the module system instead of imports #332
• components/iowa-bar.scss Transition iowa-bar.scss to use the module system instead of imports #333
• _base.scss Transition _base.scss to use the module system instead of imports #334
• _layout-main.scss Transition _layout-main.scss to use the module system instead of imports #335
• _local-fonts.scss Transition _local-fonts.scss to use the module system instead of imports #336
• _utilities.scss Transition _utilities.scss to use the module system instead of imports #337
• _variables.scss Transition _variables.scss to use the module system instead of imports #338
• fonts.scss Transition fonts.scss to use the module system instead of imports #339
• reset.scss Transition reset.scss to use the module system instead of imports #340
• theme.scss - Maybe also move this to the theme folder? Transition theme.scss to use the module system instead of imports #341
• uids-base.scss Transition uids-base.scss to use the module system instead of imports #342
• uids.scss Transition uids.scss to use the module system instead of imports #343

src/components

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