Create/use an SCSS variables/mixins file

[twschiller]

Implementation Sketch

• Check if the bootstrap SCSS have utilities as variables/mixins. If so can we re-use them in our modules?
• Create a SCSS variables file if it does not already exist
• Is should include: colors, padding (which should match the utility classes)
• Add documentation on how to use (how to import, etc.)

Questions

• Can we use the existing _variables.scss file?
• We need to have a file for the options page/sidebar them, and another file for the devtools theme
• Does padding/margin belong in there? Or do those get implemented using mixins?

[mnholtz]

FYI - finished looking into this today

It looks like with node-sass (which is apparently deprecated, by the way. Perhaps we should consider moving over to Dart Sass as recommended in the deprecation reference) we can simply import & use mixins and variables like so:

// Snippit from a quick experiment I did in the options page
// Including full path because it looks like this is where our main theme variables & mixins live
// It will be nice to eventually include a shortcut to the directory
@import "../../../../vendors/theme/assets/styles/_variables.scss";
@import "../../../../vendors/theme/assets/styles/mixins/_misc.scss";

.cardFooter {
  color: $sidebar-dark-menu-icon-color;
}

.sharingLabel {
  //overflow: hidden;
  //white-space: nowrap;
  //text-overflow: ellipsis;
  @include ellipsor;
}

Although, it looks like webpack is not happy with importing some of our existing files, like _variables.scss, in the way they are currently written. I had to comment out offending lines that were using improperly imported or non-existent variables.

Additionally, I think we should refactor files like _variables.scss to remove or replace unused or unhelpful variables & mixins (e.g. colors that we never want to use in the app). We'll have to take inventory on what kinds of styles are covered, and which ones are not.

---

Other alternatives I found in my research:
1. using sass-resources-loader

 // We could potentially register existing bootstrap theme files like this in webpack config
            resources: [
              './path/to/vars.scss',
              './path/to/mixins.scss',
              './path/to/functions.scss'
            ]

or
2. css modules variables?
Although this method doesn't look desirable for being able to reuse existing sass files, as well as providing a method to use mixins.

[fregante]

If we can stick to regular SCSS it would probably be easier, also because we're already using it.

---

Re: dart-sass

We can't upgrade due to our incompatible custom theme:

• Switch from node-sass to dart-sass #975

[mnholtz]

If we can stick to regular SCSS it would probably be easier, also because we're already using it.

I agree

[fregante]

Side requests:

• Move our customizations out of the vendors folder because it takes some guesswork to figure out what is ours and what is the default Bootstrap theme
• Find a way to use SCSS color variables in JS
  We have a few instances of colors copy-pasted into JS files. Maybe we can use this: https://stackoverflow.com/a/66120027 thanks to CSS modules.

[BLoe]

@mnholtz Is this ticket relevant any more? Was this before we created our color variables file and stuff?

[mnholtz]

@BLoe I think we can tentatively close this. We've implemented a lot of points (e.g. being able to import variables) discussed in this ticket. We probably want to address newer tickets that address css architecture instead.