What files do you divide less/sass into?

Question

css

Guys, I'm just getting acquainted with preprocessors. Therefore, I wonder what files your less / sass consists of? How is the structure organized?
I understand that everyone is comfortable in their own way. But still...

Answer 1

The question seems to be not a question, but here's how I do it (I'm lazy, it's probably better not to do this, but still):
1) The style file, the main one, here we connect all the other styles and write the styles of the main page\pages
1.1) If the pages large, it's better to make a separate style file for each and include it in the main one
2) The media query file, I think it's clear here :)
3) The file of mixins and common classes. (general classes - something like a button that occurs 10 times on a page in a row or something something like that :)) Common colors in variables, also here. And other small things that you don't want to leave in the main style file.
--------------------
PS I heard that some people split style files into many many files, almost into sections, like:
header.sass footer.sass aside.sass etc. But I'm lazy and therefore, as a last resort, I divide it into different pages, if there are a lot of straight styles.

Answer 2

I do this:
the main app.scss and the settings.scss settings file (global variables here, such as font size, color scheme, etc.) in the root of the scss directory;
here are several directories - vendors (for all kinds of additions + reset or normalize), components (mixins, classes ...), partials (for pages like 404, individual pages or their elements).
The structure is not mandatory at all: it can vary greatly from project to project, both in the number of files / directories, and in the “breakdown” into pages / page_elements. Now, for example, I'm making a website on the VP. The tree looks like this:

$ tree
.
├── app.scss
├── components
│   ├── _classes.scss
│   ├── _components.scss
│   ├── _mixins.scss
│   └── _typography.scss
├── partials
│   ├── _404.scss
│   ├── _global.scss
│   ├── _index.scss
│   ├── _partials.scss
│   ├── _posts.scss
│   ├── _skip.scss
│   └── _woo.scss
├── _settings.scss
└── vendors
    ├── _reset.scss
    └── _vendors.scss

3 directories, 15 files

This is just the beginning. There is a woo.scss file in the tree: there is still a common "wrapper" there, it's just that I haven't gotten to the design of the store yet. The typography is moved to the _typography.scss file separately because there are all sorts of vertical rhythms, golden sections ...
Something like that :)