I am creating a scss file and I would like to import a sass/css style into a subscope. Something like:

@use './github-markdown-dark.css' as github-dark;
@use './github-markdown-light.css' as github-light;

.markdown-body.dark {
  // put github-dark styles here
}

.markdown-body.light {
  // put github-light styles here
}

Is this doable? If it changes anything, I am using the sass library used by Quasar (vue framework).

BTW while the github style is the example, I am looking for a general solution that I could apply to other themes. This would used in conjunction with highlight.js.