File Structure
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.