replace Sass with SCSS

[ezra-sg]

Overview

Presently, styles are fragmented between Sass and SCSS formats. In order to make the codebase more in line with the Vue / web frontend community at large, as well as to make the codebase consistent, styles should be migrated to be in Sass format. Additionally, style files should be arranged in a logical fashion, such that a new developer could find what they need simply by looking at the repo's file structure.

Acceptance criteria

• a new Issue should be created to refactor styles into a standardized directory structure which is determined as a part of this Issue (see Technical Considerations)
  • implementation of directory re-structure is out of scope for this issue
• all .sass files should be replaced with a .scss file
  • style cleanup is out of scope for this issue
• all Sass styles in the repo should be replaced with SCSS syntax
• there should be no remaining instances of <style lang="sass"> in SFCs
• an ESLint rule should be added to enforce style syntax if possible

Technical considerations

• an example of how to design a style system directory structure can be found here: https://raygun.com/blog/sass-tutorial-maintainable-code/. Subdirectories should at least include:
  • typography
  • variables (color, spacers,
  • overrides (for overriding library/plugin/framework styles)
  • legacy (for temporary placement of existing styles in need of refactor - implementation of which should be handled in a separate Issue from the directory restructure)
  • modules (for components which span multiple SFCs and thus cannot rely on SFC <style> tags)
• a utility(s) should likely be used to migrate formats from sass to SCSS
• if the webpack loaders for sass and scss are not the same, sass loader should be removed

Tasks