How to organize topics using sass in Yii2?

Question

Yii

I think how to make themes for the site on Yii2. Created based on the advanced template.
Now in the web directory, where the server is directed, there is such a structure:

_dev/
    sass/
        _global.scss
        _vars.scss
        site.scss
css/
    site.css

From _dev/sass/* everything just compiles to css/*.
How would I do it without sass I would put it next to the web, or directly in the themes web directory with something like this:

themes/
    classic/
        css/
            mod1/
                mod.css
            mod2/
                mod.css
            theme.css

Thus, the theme.css and mod.css files would override existing styles, or add new ones. And as a result, 3 css files would be connected on the page:

main.css - основные стили
theme.css - изменения для темы
mod.css - изменения для модификации темы

But with sass I would like to use the feature with variables. For example, in mod.scss I would store only overridden variables with colors and pictures.
First option: I make the structure as described for css, and I would try to describe sass in such a way that I end up with a css file with overridden styles.
The second option: I make the structure for css described above, make mod.sass files with overridden variables, make a combine.sass file, where I describe the necessary includes, and as a result, only one mod.css is connected to the site, where everything that is included in mod.scss. For now, I'm leaning towards this approach.
Third option: Yii2 has built-in preprocessors for sass, less, etc. and the ability for AssetBundle to specify sourcePath so that the framework itself copies the files to a place accessible from the web. And using this try to describe the theme logic in the AssetBundle so that the necessary files are compiled only for the active theme. (But I don’t know how to do it yet)
Please tell me how, in your opinion, it would be best to do what was planned? Or maybe someone has already implemented something similar? Thanks for any idea.

Answer 1

In general, I did it as follows.
The topic was divided into the following parts:
1. Mask. Redefines the site grid. Maybe a completely new design.
2. Modifications. Redefines certain parts of the site. Widgets, components, lists, or whatever.
3. Styles. Contains only variables with colors, fonts, pictures, etc.
4. Themes. Contains a sass file, contains only the includes of the above files. Compiled to the appropriate location in the web folder

themes
    v1
        mask
            sass
            views
        mods
            footer.v2
            leftsidebar
        styles
            default
            darkblue
        themes
            default
                sass
            darkblue
                sass
    v2
        mask
        mods
        styles
        themes