Click to copy
WP-Admin-Style/ // Downloaded folder | |– dist / / / / / | |– wp-admin-style.css | | |–src / / / / / | |– 01--core / | | |– _reset.scss | | |– _colors.scss // CSC * SCSS Variablel | | |– _size.scss | | |– _utility.scss| | | |– _mixin.scss | | | | | |– 02--elements / | | |– _icon.scss | | | | | |– 03--layout / | | |– _card.scss | | |– _layout-utility.scss | | | | | |– 04-components/ | | |– _nav-list.scss | | | | | |– 05-pages/ | | | | | |- wp-admin-style.scss // Main SCSS File
I divide my scss files into main 5 folders at top level: core, elements, components, layout and pages. I will dive into each folders in a minute. Beside these folders, I have
wp-admin-style.scss file at the root level of
scss folder. This app file imports all other scss files from all other folders. This way, I can point my bundler to this one file and it can import my whole SCSS code easily. Now let’s dive into each folders deeply.
Looks like @import to me, but inline.
Of course for a single case like this, inline might be the way to go, but it gets more useful as more declarations are needed.